如何使用RTK查询和typescript使查询挂钩返回类型取决于参数类型

Question

我正在使用React制作一个用于UI开发的程序。该程序旨在访问文件系统进行设置，因此我在节点中运行一些服务器代码，并使用RTK查询来与该代码进行通信。

一些服务器代码从xml文件中读取一个值。我在服务器代码中定义了这些接口，这些接口定义了请求和响应参数的类型：

// define the key and value pairing for the file
export interface PersistentFileValues {
initialValue: number;
repaymentChanges: DatedValue[];
}
// queries should provide a key that matches the pairing
export interface GetPersistentFileValueRequestQuery {
itemKey: keyof PersistentFileValues;
}
// define type that gets the value type given a key
export type PersistentFileValue<T extends keyof PersistentFileValues> =
PersistentFileValues[T];
// make GetPersistentFileValueResponseBody depend on GetPersistentFileValueRequestQuery
export interface GetPersistentFileValueResponseBody<
T extends GetPersistentFileValueRequestQuery
> {
value: PersistentFileValue<T['itemKey']>;
}

如果我使用createApi，并且有一个名为getPersistentFileValue的端点，我该如何进行键入，以便钩子根据作为参数提供的键来计算返回类型？

目前我有：

endpoints: (builder) => ({
getPersistentFileValue: builder.query<
PersistentFileValue<keyof PersistentFileValues>,
GetPersistentFileValueRequestQuery
>({
query: (queryData) => {
return {
url: constructGetPersistentFileValueUrl(queryData), // appends the data as a string to the url
method: 'get',
};
},
transformResponse: (result, _meta, arg) => {
const out = result as GetPersistentFileValueResponseBody<typeof arg>;
return out.value;
},
}),
...

似乎没有任何类型错误。然而，当我使用钩子时：

const { data: repaymentChanges } = useGetPersistentFileValueQuery({
itemKey: 'repaymentChanges',
});

我发现repaymentChanges的类型过于通用，如果我试图获取length属性，就会出现错误。

我如何键入内容，以便钩子允许我访问具有正确类型的数据？有更好的方法吗？

在此之前，我为从文件中访问的每个值创建了一个端点，但这似乎很笨拙。

Answer 1

由于RTK Query正在内部映射类型以创建这些新的函数签名，任何类型的泛型/重载都将丢失。你最好的选择是使用RTK查询生成的钩子，将其封装在你自己的函数中，并为此提供重载。