React TypeScript配合react-redux使用children时TS2739错误如何解决

错误原因 #

你在定义VerifiedComp的redux连接器时，没有显式声明外部传入的自有Props类型，TypeScript无法区分哪些属性是Redux自动注入的，哪些需要父组件手动传入，会把mapStateToProps返回的所有字段都判定为需要外部传入的属性，因此只传入children时就会抛出缺少email、emailVerified字段的TS2739错误。

修复步骤 #

1. 先删掉mapStateToProps里多余的children返回逻辑，children属于组件自有属性，不需要从Redux层传递：

const mapStateToProps = (state: StateTypes) => ({
  email: state.auth.providerData.email,
  emailVerified: state.auth.user.emailVerified
});

2. 给connect方法显式传入泛型参数，指定自有Props类型：

// connect泛型参数顺序：<RootState类型, mapState返回值类型, mapDispatch返回值类型, 自有Props类型>
const connector = connect<
  ReturnType<typeof mapStateToProps>,
  {},
  PropTypes,
  StateTypes
>(mapStateToProps);

修改后TypeScript就能正确识别：PropTypes里定义的children需要父组件传入，email和emailVerified由Redux自动注入，不需要外部传递，报错就会消失。

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