mapStateToProps函数类型是什么？如何实现类型安全的函数传递

首先，如果你在使用React Redux，官方已经为mapStateToProps提供了现成的类型定义，完全不需要用any来妥协。同时你也可以手动自定义类型，两种方式我都结合你的代码来举例说明：

方式一：使用React Redux官方类型 #

首先从react-redux导入MapStateToProps类型：

import { MapStateToProps } from 'react-redux';

先理清楚两个核心类型（建议把你原来的Props类改成interface，因为类会生成实例，而我们这里只需要类型定义）：

• 全局状态类型：也就是mapStateToProps接收的参数类型，对应你原来的Props：

// 替换你原来的class Props，用interface更合适
interface RootState {
  counterModel: CounterModel | null;
}

• 组件接收的Props类型：也就是mapStateToProps返回的结果类型：

interface ComponentProps {
  counterModel: CounterModel | null;
}

接下来就可以给你的mapStateToProps指定类型了，MapStateToProps的泛型参数依次是：组件Props类型、组件自身的Props（如果没有就传{}）、全局状态类型：

const mapStateToProps: MapStateToProps<ComponentProps, {}, RootState> = ({ counterModel }) => ({
  counterModel
});

方式二：自定义函数类型 #

如果不想依赖react-redux的类型，你也可以自己定义一个函数类型：

// 泛型参数：返回的组件Props类型，接收的全局状态类型
type MapStateToPropsFn<StateProps, RootState> = (state: RootState) => StateProps;

然后用这个类型来标注你的函数：

const mapStateToProps: MapStateToPropsFn<ComponentProps, RootState> = ({ counterModel }) => ({
  counterModel
});

类型安全地传递这个函数 #

当你需要把mapStateToProps作为参数传递给其他函数（比如高阶组件、自定义Hook）时，直接用上面的类型声明参数即可：

// 比如一个接收mapStateToProps的自定义Hook
function useCounterHOC(mapState: MapStateToProps<ComponentProps, {}, RootState>) {
  // 这里可以安全地使用mapState函数，TypeScript会帮你做类型检查
}

// 调用时直接传你的mapStateToProps，类型不匹配会直接报错
useCounterHOC(mapStateToProps);

这样做就能完全避免any，实现类型安全的传递和使用啦。

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