React+TypeScript中如何约束组件props必须包含指定属性

核心是TypeScript的函数参数逆变规则 #

TS中函数类型的赋值遵循参数逆变原则：当你把函数A赋值给函数类型的变量B时，A的参数类型必须是B的参数类型的超集（也就是B定义的入参可以安全传给A），不能反过来。

对应到你的场景：

• 变量f2的类型是FunctionComponent<{aNumber: number}>，意味着你后续可以只传入仅含aNumber的props调用f2
• 你要赋值的MyComp要求props必须同时有aNumber和aString
  如果允许这个赋值，你用f2({aNumber: 1})调用的时候，MyComp拿不到必填的aString，就会出现运行时错误，TS的报错就是在提前阻止这个风险。

为什么FunctionComponent<any>可以正常运行 #

any类型在TS中会关闭所有类型校验，TS不会再检查props的属性是否匹配，所以不会触发类型报错，但这也意味着你丢失了类型保护，很容易出现运行时问题。

如果你的需求是「接收的组件props必须包含aNumber，允许有其他自定义属性」，可以通过泛型约束实现：

// 如果你是要定义函数参数，用泛型约束入参组件的props
function renderComponent<T extends { aNumber: number }>(Comp: React.FC<T>, props: T) {
  return <Comp {...props} />
}

// 调用的时候会自动校验props是否符合组件要求
renderComponent(MyComp, { aNumber: 1, aString: 'test' }) // 正常
renderComponent(MyComp, { aNumber: 1 }) // 会提示缺少aString，符合预期

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