使用Redux-Thunk与TypeScript时connect出现类型错误

这个类型错误的核心原因很明确：TypeScript默认的Dispatch类型只认标准Action（必须带type属性的对象），但Thunk Action Creator返回的是一个函数，不是普通Action。我们需要用Redux-Thunk提供的专属类型来告诉TypeScript“这个dispatch可以处理函数形式的Thunk”。

结合你给出的代码和依赖版本，我给你一步步的修正方案：

1. 修正Action与Action Creator的类型定义 #

首先要导入Redux-Thunk提供的ThunkAction类型，用来正确标记你的Thunk Action Creator：

import { Action, ThunkAction } from 'redux';
import { Dispatch } from 'react-redux';

export enum TestActionTypes { THUNK_ACTION = "THUNK_ACTION" }
// 定义标准Action类型
export interface ThunkActionInterface extends Action<TestActionTypes.THUNK_ACTION> {}
export type TestAction = ThunkActionInterface;

// 用ThunkAction标记返回值，明确这是一个Thunk
export function thunkActionCreator(): ThunkAction<void, any, unknown, TestAction> {
  return function(dispatch: Dispatch<TestAction>) {
    dispatch({ type: TestActionTypes.THUNK_ACTION });
  };
}

这里ThunkAction的四个泛型参数分别是：

• void：Thunk函数的返回值类型（你这里没有返回值，所以用void）
• any：你的Store State类型（建议后续替换成实际的RootState类型，不要用any）
• unknown：Thunk的额外参数（如果不需要可以用unknown）
• TestAction：这个Thunk可以dispatch的标准Action类型

2. 修正mapDispatchToProps中的Dispatch类型 #

接下来要把mapDispatchToProps里的Dispatch<any>换成Redux-Thunk的ThunkDispatch，让TypeScript知道这个dispatch能处理Thunk函数：

import { ThunkDispatch } from 'redux-thunk';

// ... 其他代码保持不变 ...

function mapDispatchToProps(dispatch: ThunkDispatch<any, unknown, TestAction>): DispatchProps {
  return { testThunk: () => dispatch(thunkActionCreator()) };
}

ThunkDispatch的三个泛型参数对应：

• any：Store State类型
• unknown：Thunk额外参数
• TestAction：支持的标准Action类型

3. 更简洁的写法：用bindActionCreators #

如果你不想手动处理dispatch的类型，也可以用bindActionCreators，它会自动适配Thunk的类型：

import { bindActionCreators } from 'redux';

function mapDispatchToProps(dispatch: ThunkDispatch<any, unknown, TestAction>): DispatchProps {
  return bindActionCreators({ testThunk: thunkActionCreator }, dispatch);
}

额外建议：避免使用any #

虽然上面的代码用了any来适配你的现有代码，但实际项目中建议定义明确的RootState类型，替换掉所有any，这样TypeScript的类型检查才能发挥最大作用。比如：

// 假设你的RootState是这样的
interface RootState {
  // 你的state结构
}

// 然后在ThunkAction和ThunkDispatch中替换any为RootState
export function thunkActionCreator(): ThunkAction<void, RootState, unknown, TestAction> {
  // ...
}

function mapDispatchToProps(dispatch: ThunkDispatch<RootState, unknown, TestAction>): DispatchProps {
  // ...
}

这样修改后，TypeScript就不会再报错了，因为它现在知道你的dispatch可以接收Thunk函数类型的参数，而不仅仅是标准Action对象。

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