React+Redux-Thunk+TypeScript：传递额外参数时类型错误问题

这个错误的核心原因是你在使用ThunkDispatch时，没有正确指定**额外参数（extraArg）**的类型，导致TypeScript无法识别action函数里的第三个参数类型，进而触发类型不兼容的报错。下面是一步步的解决方案：

1. 统一Thunk相关的泛型参数定义 #

首先，我们需要为Redux store和Thunk函数定义清晰的专属类型，避免用any模糊类型检查：

import { ThunkMiddleware, ThunkDispatch } from 'redux-thunk';
import { AnyAction, Store } from 'redux';

// 定义你的额外参数类型（这里是string，如果你传递服务实例可以换成对应类型）
type ExtraArg = string;

// 定义应用专属的ThunkDispatch类型，包含extraArg
type AppThunkDispatch = ThunkDispatch<AppState, ExtraArg, AnyAction>;

// 定义应用专属的Thunk函数类型（可选，但能让action类型更严谨）
type AppThunk<ReturnType = void> = (
  dispatch: AppThunkDispatch,
  getState: () => AppState,
  extraArg: ExtraArg
) => ReturnType;

2. 修正store的ThunkMiddleware类型声明 #

在store.ts里，我们可以用刚才定义的ExtraArg来统一类型，避免重复冗余：

const middlewares = [
  routerMiddleware(history),
  thunkMiddleware.withExtraArgument('bar') as ThunkMiddleware<AppState, AnyAction, ExtraArg>
];

const middleWareEnhancer = applyMiddleware(...middlewares);
const store = createStore(
  rootReducer(history),
  preloadState,
  composeWithDevTools(middleWareEnhancer)
);

// 给store添加类型声明，方便后续直接使用正确的dispatch类型
export type AppStore = Store<AppState, AnyAction> & {
  dispatch: AppThunkDispatch;
};

3. 优化action的类型，移除any #

把触发错误的getAll action改成使用我们定义的AppThunk类型，让TypeScript自动推导参数类型：

// 使用AppThunk类型，替代原来的any
export const getAll = (): AppThunk<Promise<any>> => async (
  dispatch,
  getState,
  extraArg // 这里会自动识别为string类型
) => {
  // ...你的action逻辑
  console.log(extraArg); // 这里可以安全使用，类型检查完全生效
};

4. 修正dispatch调用的类型断言 #

在index.ts里，不需要手动断言成不完整的ThunkDispatch，直接使用我们定义的类型即可：

// 如果store已经声明为AppStore类型，直接调用就行
store.dispatch(getAll());

// 如果需要手动断言，用正确的类型：
(store.dispatch as AppThunkDispatch)(getAll());

错误原因解析 #

你之前的错误里，ThunkDispatch<{}, void, AnyAction>的第二个泛型参数是void，表示没有额外参数，但你的action函数明确期望第三个参数是string，TypeScript会判定这两个类型不兼容。通过统一泛型参数里的extraArg类型，就能让TypeScript正确识别action和dispatch的匹配关系，解决类型报错。

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