如何在TypeScript中使用reselect的createStructuredSelector？附报错解决

我刚碰到过一模一样的问题！这本质上是TypeScript类型推断的局限性——createStructuredSelector没法自动从你的选择器和全局state类型里正确推断出泛型参数，导致重载匹配失败。

问题根源 #

你原来手动写的mapStateToProps里，TypeScript能通过state: AppState直接推断出selectItemCount的输入类型；但换成createStructuredSelector后，它需要明确知道两个核心类型：

1. 你的全局state类型（AppState）
2. 最终要映射到组件props的对象类型（这里是包含itemCount的结构）

如果不手动指定这些泛型参数，TypeScript无法确认选择器的输入输出是否和props类型匹配，就会抛出重载不匹配的错误。

解决方案：显式指定泛型参数 #

给createStructuredSelector加上泛型声明，把AppState作为第一个泛型参数，把对应props的类型作为第二个参数。你可以直接复用组件的ICartIconProps类型，用Pick工具类型提取需要的字段，避免重复定义。

修正后的代码示例 #

// CartIcon组件修正后的核心代码
import { AppState } from '../../redux/store'; // 确保导入AppState

interface ICartIconProps {
  toggleDropDown: () => void;
  itemCount: number;
}

// 修正后的mapStateToProps，显式指定泛型
const mapStateToProps = createStructuredSelector<
  AppState,
  Pick<ICartIconProps, 'itemCount'>
>({
  itemCount: selectItemCount,
})

export default connect(mapStateToProps, mapDispatchToProps)(CartIcon);

额外验证点 #

确保你的selectItemCount选择器类型是正确的：从你的selector代码来看，它通过createSelector构建，依赖的selectCart已经明确接收AppState作为输入，所以这部分类型是没问题的。如果后续新增选择器，也要保证每个选择器的输入输出类型和泛型声明匹配。

这种方式不仅能解决当前的类型错误，还能让代码的类型约束更清晰，避免后续新增选择器时出现隐性类型问题。

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