如何使用RTK Query与TypeScript让查询钩子的返回类型依赖于参数类型

你的问题核心在于当前的端点定义返回的是所有可能值的联合类型，TypeScript无法根据传入的itemKey精准推断具体的返回类型，导致访问length这类特性属性时报错。我们可以通过给transformResponse添加泛型关联，结合类型定义的优化来解决这个问题。

第一步：优化类型定义（可选但更清晰） #

先调整你的类型接口，让请求和响应类型更紧密地关联itemKey的具体类型：

// 定义文件的键值对
export interface PersistentFileValues {
  initialValue: number;
  repaymentChanges: DatedValue[];
}

// 泛型请求参数：绑定itemKey的具体类型
export type GetPersistentFileValueRequestQuery<T extends keyof PersistentFileValues = keyof PersistentFileValues> = {
  itemKey: T;
};

// 响应体：直接依赖itemKey的类型推导value类型
export type GetPersistentFileValueResponseBody<T extends keyof PersistentFileValues> = {
  value: PersistentFileValues[T];
};

第二步：修改RTK Query端点定义 #

关键是给transformResponse添加泛型，让它的返回类型和传入的itemKey类型绑定，这样TypeScript就能自动推导钩子的返回值类型：

endpoints: (builder) => ({
  getPersistentFileValue: builder.query<
    // 基础响应类型：所有可能值的联合（作为兜底）
    PersistentFileValues[keyof PersistentFileValues],
    // 请求参数类型：使用泛型版本的请求接口
    GetPersistentFileValueRequestQuery
  >({
    query: (queryData) => ({
      url: constructGetPersistentFileValueUrl(queryData),
      method: 'get',
    }),
    // 给transformResponse添加泛型，关联请求参数的itemKey类型
    transformResponse: <T extends keyof PersistentFileValues>(
      result: unknown,
      _meta: unknown,
      arg: GetPersistentFileValueRequestQuery<T>
    ) => {
      // 安全断言响应体类型并返回对应value
      return (result as GetPersistentFileValueResponseBody<T>).value;
    },
  }),
  // 其他端点...
})

第三步：使用钩子的效果 #

现在当你调用钩子时，TypeScript会根据传入的itemKey自动推导返回值类型：

// repaymentChanges 自动推断为 DatedValue[]，可以安全访问length
const { data: repaymentChanges } = useGetPersistentFileValueQuery({ itemKey: 'repaymentChanges' });
console.log(repaymentChanges?.length);

// initialValue 自动推断为 number，可以安全执行数值操作
const { data: initialValue } = useGetPersistentFileValueQuery({ itemKey: 'initialValue' });
console.log(initialValue?.toFixed(2));

更优实现方案思考 #

你之前为每个key单独创建端点的方式确实繁琐，当前的泛型方案已经是比较简洁的实现了。如果你的项目规模较大，还可以考虑：

• 使用RTK Query的代码生成工具（@rtk-query/codegen-openapi），根据后端接口规范自动生成带类型的端点和钩子，进一步减少手动维护成本；
• 在transformResponse中添加简单的类型检查（比如根据itemKey判断返回值的结构），增强类型安全性，避免后端返回异常类型导致的运行时问题。

内容的提问来源于stack exchange，提问作者user453445