如何为RTK Query的UseLazyQuery触发函数trigger添加正确的类型注解？

嘿，我刚好也碰到过这个困扰！其实RTK Query已经帮我们内置了对应的类型，完全不用靠any来混过去，这里有几种简单的解决方案：

方法一：直接提取父组件中trigger的类型 #

如果你的子组件和父组件在同一个文件，或者可以轻松共享类型的话，直接用typeof来提取trigger的类型就好：

// 父组件代码
const [trigger] = useLazyGetQuery();
// 提取trigger的类型
type LazyQueryTrigger = typeof trigger;

// 子组件中使用这个类型
export const ChildComponent = ({ trigger }: { trigger: LazyQueryTrigger }) => {
  // 现在trigger会有完整的类型提示啦
};

方法二：从生成的API中直接获取触发函数类型 #

如果你是用createApi生成的API切片，每个endpoint都对应了一个initiate方法，它的类型和useLazyQuery返回的触发函数完全一致。假设你的API切片是这样的：

// api.ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const api = createApi({
  reducerPath: 'myApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getQuery: builder.query({
      query: (id: number) => `/data/${id}`,
    }),
  }),
});

// 导出lazy query hook
export const { useLazyGetQuery } = api;

那你可以直接从endpoint的initiate方法提取类型：

// 在子组件或者类型文件中
import { api } from './api';

type GetQueryTrigger = typeof api.endpoints.getQuery.initiate;

export const ChildComponent = ({ trigger }: { trigger: GetQueryTrigger }) => {
  // 这里trigger会自动带上正确的参数、返回Promise类型的提示
};

为什么不推荐用any？ #

用any会完全丢失TypeScript的类型检查优势：比如你调用trigger时传错参数类型、或者处理返回的Promise时搞错结构，TS都没法帮你提前发现问题。而用正确的类型注解后，编辑器会给你完整的代码提示，还能在编译阶段就拦截错误～

备注：内容来源于stack exchange，提问作者Kostya GL