TypeScript中使用connect注入属性后，如何正确使用组件？

嘿，这个问题我之前在TS+Redux项目里也踩过坑！问题出在TypeScript对connect返回的组件类型推断上——你定义的IFooProps把Redux要注入的userId也算成了组件必须手动传入的props，但实际上这个值是mapStateToProps自动给的，根本不需要咱们手动传。

解决方法很简单，把组件的props拆成两类，再给connect指定正确的泛型参数就行：

步骤1：拆分Props类型 #

把需要手动传入的props和Redux注入的props分开定义。这里你的Foo组件没有需要手动传的props，所以手动props的接口是空的：

// Redux会注入的props
interface IFooInjectedProps {
  userId: number;
}

// 组件需要手动接收的props（这里为空）
interface IFooOwnProps {}

步骤2：修改组件的Props类型 #

让组件接收的props是这两个接口的交集：

class Foo extends Component<IFooOwnProps & IFooInjectedProps> {
  render() {
    return <p>foo... User ID: {this.props.userId}</p>;
  }
}

步骤3：给connect指定泛型参数 #

告诉TypeScript这四个泛型分别是：注入的props、dispatch映射的props、手动传入的props、Redux的State类型：

export default connect<IFooInjectedProps, {}, IFooOwnProps, IState>(
  mapStateToProps,
  mapDispatchToProps
)(Foo);

修改后的完整Foo.tsx代码 #

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

// 定义Redux注入的props
interface IFooInjectedProps {
  userId: number;
}

// 定义组件需要手动传入的props（这里为空）
interface IFooOwnProps {}

// 组件接收的props是两者的组合
class Foo extends Component<IFooOwnProps & IFooInjectedProps> {
  render() {
    return <p>foo... User ID: {this.props.userId}</p>;
  }
}

const mapStateToProps = (state: IState) => {
  return {
    userId: state.user.id,
  };
};

const mapDispatchToProps = (dispatch: Dispatch) => {
  return {};
};

// 给connect指定泛型参数：InjectedProps, DispatchProps, OwnProps, State
export default connect<IFooInjectedProps, {}, IFooOwnProps, IState>(
  mapStateToProps,
  mapDispatchToProps
)(Foo);

这样改完之后，你在Index.tsx里写<Foo />就不会再报缺少userId的错误了——TypeScript现在知道userId是Redux自动注入的，不需要手动传。

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