Working with Typescript Interfaces- error: 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);

登录用户方法代码：

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

发生这种情况是因为属性“成功”仅存在于 UserInfo 类型上。由于它是联合类型，编译器无法确定函数 returns 是数据对象（具有 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

Answer 2

真正的问题是在 transformResponse 函数内部发现的，它是如何 'tunnels' 进一步响应数据的。

transformResponse: (rawResult : UserInfo) => {
  return rawResult
}

rawResult 很可能不是 UserInfo 类型，而是 { data: UserInfo } 类型。这正是您在收到的错误中看到的内容。

所以要修复它，函数应该如下所示：

transformResponse: (rawResult: { data: UserInfo }) => {
  return rawResult.data
}

然后您的代码应该按预期工作，没有任何其他 ifs。

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

Working with Typescript Interfaces- error: property does not exist

Working with Typescript Interfaces- error: property does not exist

javascript

typescript

reactjs

redux

redux-toolkit