Redux Toolkit注入Thunk中间件额外参数时的TypeScript类型错误

要让TypeScript识别Thunk中间件注入的额外参数类型，需要从类型定义和类型关联两个层面处理，具体步骤如下：

1. 明确额外参数的类型 #

先为StudentRepository和注入的额外参数创建类型声明：

// 定义StudentRepository的接口
interface StudentRepository {
  getStudents: () => Promise<Student[]>;
  // 补充你的其他方法类型
}

// 定义Thunk额外参数的类型
type ThunkExtraArgs = {
  createAPIStudentRepository: () => StudentRepository;
};

// 同时定义根状态类型（后续配置Store会用到）
import rootReducer from './reducers';
type RootState = ReturnType<typeof rootReducer>;

2. 配置Store时绑定额外参数类型 #

在configureStore中配置Thunk中间件时，显式指定extraArgument的类型：

import { configureStore, ThunkMiddleware } from '@reduxjs/toolkit';
import { createAPIStudentRepository } from './api';

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      thunk: {
        extraArgument: { createAPIStudentRepository } as ThunkExtraArgs
      }
    }) as ThunkMiddleware<RootState, any, ThunkExtraArgs>[]
});

3. 让TypeScript识别extra类型（二选一即可） #

方式一：全局类型扩展（推荐） #

创建一个redux.d.ts类型声明文件，扩展Redux Toolkit的Thunk类型，让所有createAsyncThunk自动识别extra类型：

import { ThunkExtraArgs } from './path-to-your-types';

declare module '@reduxjs/toolkit' {
  interface ThunkExtraArgument extends ThunkExtraArgs {}
}

方式二：在createAsyncThunk中显式指定类型参数 #

如果不想全局扩展，可以在创建异步Thunk时，手动传入类型参数：

import { createAsyncThunk } from '@reduxjs/toolkit';

const fetchStudents = createAsyncThunk<
  Student[],        // 异步操作的返回值类型
  void,              // 调用Thunk时传入的参数类型
  {
    state: RootState;// 根状态类型
    extra: ThunkExtraArgs; // 额外参数类型
  }
>('students/fetch', async (_, { extra }) => {
  const repo = extra.createAPIStudentRepository();
  return repo.getStudents();
});

完成以上步骤后，TypeScript就会正确识别extra的类型，不会再提示unknown错误。

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