使用 Typescript 接口 - 错误：属性不存在

Question

我建立了这个界面

export interface UserInfo {
    success?: boolean,
    user?: User,
    employer?: Employer,
    hr?: Hr
}

现在当我这样做时

let data = await loginUser(loginData);
console.log(data.success);

登录用户方法代码：

import {createApi, fetchBaseQuery} from "@reduxjs/toolkit/query/react";
import {BASE_API_ENDPOINT, LOGIN_API_ENDPOINT} from "../../constants/apis";
import {LoginData, UserInfo} from "../../models/apis/UserData";

export const loginApi = createApi({
    reducerPath: 'loginReducer',
    baseQuery: fetchBaseQuery({ baseUrl: BASE_API_ENDPOINT }),
    endpoints: (builder) => ({
        loginUser: builder.mutation<UserInfo, LoginData> ({
            query: (data: LoginData) => ({
                    url: LOGIN_API_ENDPOINT,
                    method: "POST",
                    body: data
            }),
            transformResponse: (rawResult : UserInfo) => {
                return rawResult
            }
        })
    })
})
export const { useLoginUserMutation } = loginApi;

我收到这个错误

类型“{ data: UserInfo;”上不存在属性“成功” } | { 错误：FetchBaseQueryError | 序列化错误；}'。

我是打字稿新手，我想从 { data: UserInfo; 访问 UserInfo 对象 但我无法这样做。有人可以帮忙吗？

Answer 1

发生这种情况是因为属性“success”仅存在于 UserInfo 类型上。由于它是联合类型，编译器无法确定该函数是否返回数据对象（具有 UserInfo 类型）或错误对象（FetchBaseQueryError | SerializedError）

为了访问响应的 success 属性，您可以首先检查它是否存在

if("success" in data){
    console.log(data.success)
}

在这里阅读有关联合类型的更多信息：
https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#联合类型