TypeScript Redux：基于Dispatch Props的参数Props类型检查问题

嘿，我懂你现在卡在React+Redux的类型检查上了——这种结合泛型和connect的场景确实容易踩坑，我来给你一步步捋清楚正确的实现方式，保证类型检查能正常工作：

1. 明确你的Props接口 #

你已经定义了两个接口，这里先确认一下（如果someData有具体类型，记得把any替换成实际类型，类型检查会更严格）：

// 父组件传递的Props
interface MyProps {
  name: string;
}

// Redux connect生成的DispatchProps
interface DispatchProps {
  addData: (someData: any) => void;
}

2. 合并组件最终接收的Props类型 #

把父组件Props和DispatchProps合并成组件实际要用到的完整Props类型，用TypeScript的交叉类型&：

type CombinedProps = MyProps & DispatchProps;

3. 创建带类型的React组件 #

让组件接收CombinedProps作为props类型，这样组件内部就能获得完整的类型提示：

import React from 'react';
import { connect, Dispatch } from 'react-redux';

const MyComponent: React.FC<CombinedProps> = ({ name, addData }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <button onClick={() => addData({ value: "test data" })}>Add Data</button>
    </div>
  );
};

4. 正确使用connect的泛型参数 #

connect函数本身支持泛型，参数顺序是：StateProps, DispatchProps, OwnProps, RootState。如果你没有从Redux state映射过来的props（也就是StateProps），用{}代替即可：

// 映射dispatch到组件props的函数
const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
  addData: (someData) => dispatch({ type: "ADD_DATA", payload: someData })
});

// 连接组件到Redux，指定泛型参数让类型检查生效
export default connect<{}, DispatchProps, MyProps>(
  null, // 没有mapStateToProps，传null
  mapDispatchToProps
)(MyComponent);

这里的第三个泛型MyProps就是父组件传递的props，connect会自动把它和DispatchProps合并，和我们定义的CombinedProps完全匹配，这样不管是父组件传参错误，还是组件内部调用addData参数不对，TypeScript都会及时报错。

额外小提示 #

如果你的项目用了Redux Toolkit，更推荐用useDispatch和useSelector的hooks写法，类型检查会更直观，不需要手动处理connect的泛型参数~

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