如何正确为RTK Query的BaseQueryFn定义自定义DefinitionExtraOptions类型？

错误原因 #

你定义的baseQueryTest将额外选项customData设为必填属性，但createApi默认期望的BaseQuery额外选项是可选的空对象{}，两者类型不兼容，导致TypeScript报错。

解决方法 #

方法1：将额外选项设为可选 #

如果customData不是必须传入的参数，把它改为可选属性即可：

import { BaseQueryFn, createApi } from '@reduxjs/toolkit/query/react';

const baseQueryTest: BaseQueryFn<
  unknown,
  unknown,
  string,
  { customData?: string }
> = async (args, api, extraOptions) => {
  // 访问时需考虑customData可能为undefined
  if (extraOptions.customData) {
    console.log(extraOptions.customData);
  }
  throw new Error('Not implemented');
};

createApi({
  baseQuery: baseQueryTest,
  endpoints: () => ({}),
});

方法2：全局指定必填的额外选项类型 #

如果customData是必须传入的参数，需要通过createApi的泛型参数声明全局的额外选项类型，让createApi匹配你的BaseQuery类型：

import { BaseQueryFn, createApi } from '@reduxjs/toolkit/query/react';

const baseQueryTest: BaseQueryFn<
  unknown,
  unknown,
  string,
  { customData: string }
> = async (args, api, extraOptions) => {
  // 此时customData必然存在，可直接访问
  console.log(extraOptions.customData);
  throw new Error('Not implemented');
};

// 通过泛型指定全局额外选项类型
createApi<{ customData: string }>({
  baseQuery: baseQueryTest,
  endpoints: () => ({}),
});

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