使用Typescript接口- error:属性不存在

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;

我得到这个错误

属性'success'不存在类型'{data: UserInfo;} |{错误:FetchBaseQueryError | SerializedError;}"。

我是一个新手与typescript，我想访问UserInfo对象从{data: 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.htmlhttps://www.typescriptlang.org/docs/handbook/2/everyday-types.html联合类型

Answer 2

try use loginUser(loginData).unwrap() in component

Answer 3

实际问题是在transformResponse函数内部发现的，以及它如何进一步"隧道"响应数据。

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

rawResult很可能不是UserInfo型，而是{ data: UserInfo }型。这就是你在错误中看到的

所以为了修复它，函数应该是这样的:

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

然后你的代码应该像预期的那样工作，没有任何其他的if。

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