React-Redux connect后组件类型报错：缺失reqestCurrentUser属性

嘿，我来帮你看看这个问题！你遇到的TypeScript报错，核心原因是组件的Props类型定义逻辑错了——你把Redux要自动注入的action creators，当成了需要外部手动传入的Props，所以TS才会要求你必须传reqestCurrentUser这个方法。

具体问题出在哪？ #

你定义的SessionContainerProp把SessionProp和typeof SessionStore.actionCreators合并在了一起：

type SessionContainerProp = SessionProp & typeof SessionStore.actionCreators;

TypeScript会认为，任何使用<SessionContainer />的地方，都必须手动传入reqestCurrentUser这个方法，但实际上connect高阶组件已经帮你把这些action creators注入到组件内部的props里了，根本不需要外部传。

怎么修正？ #

我们需要把组件的Props拆成两类：

1. 组件自身需要的状态Props：比如你从Redux state映射过来的user字段
2. Redux注入的方法Props：也就是那些action creators方法

然后通过connect的泛型参数，明确告诉TypeScript哪些Props是外部传入的，哪些是Redux注入的。

修正后的完整代码如下：

第一步：拆分类型定义

// 从Redux state映射过来的状态Props
export interface SessionStateProps {
  user?: string;
}

// Redux注入的action creators类型
type SessionDispatchProps = typeof SessionStore.actionCreators;

// 组件的完整Props = 状态Props + 注入的方法Props
type SessionContainerProps = SessionStateProps & SessionDispatchProps;

第二步：修正组件和connect的类型

export class SessionContainer extends React.Component<SessionContainerProps, {}> {
  constructor(props: SessionContainerProps) { super(props) }
  
  componentDidMount() {
    // 这个方法已经由connect自动注入，不用手动传
    this.props.reqestCurrentUser()
  }
  
  public render() {
    if (this.props.user != null) {
      return <Layout />;
    } else {
      return <Login />;
    }
  }
}

// 使用connect的泛型参数，明确指定各类Props的类型
export default connect<SessionStateProps, SessionDispatchProps, {}, ApplicationState>(
  (state: ApplicationState) => state.session, // 把state.session映射到组件的状态Props
  SessionStore.actionCreators // 把action creators映射到组件的方法Props
)(SessionContainer);

额外提醒：拼写错误 #

注意到你代码里的reqestCurrentUser少了一个字母u，应该是requestCurrentUser！虽然这不是当前报错的原因，但后续可能会导致action类型不匹配或者调用失败，建议赶紧修正。

这样修改之后，TypeScript就会明白reqestCurrentUser是Redux注入的，不需要外部传入，你直接渲染<SessionContainer />就不会再报错啦～

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