javascript - 使用 Typescript 接口(interface) - 错误 : property does not exist

Question

我构建了这个界面

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

现在当我这样做的时候

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

loginUser方法代码:

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;

我收到这个错误

Property 'success' does not exist on type '{ data: UserInfo; } | { error: FetchBaseQueryError | SerializedError; }'.

我是 typescript 的新手，我想从 { data: UserInfo; 访问 UserInfo 对象。但我无法这样做。谁能帮忙？

Answer 1

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

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

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#union-types