如何在Typescript中定义限定为指定React组件列表的Section类型？

你之前两种写法定义的都是组件本身的类型，但数组中存储的是组件经过JSX渲染后生成的React元素实例，二者类型不匹配，因此会报错。

使用React.ReactElement泛型即可精准匹配指定组件的渲染实例，正确写法如下：

type Section = 
  | React.ReactElement<HeroSectionProps, typeof Hero>
  | React.ReactElement<SomeOtherComponentProps, typeof SomeOtherComponent>

该类型的匹配逻辑：

• 泛型第一个参数对应组件接收的props类型
• 泛型第二个参数对应组件本身的类型

定义完成后，Section[]数组就只能存入Hero、SomeOtherComponent两个组件渲染出来的元素，加入其他组件实例或者普通DOM元素都会触发TS类型报错，完全符合需求。如果后续需要新增允许的组件，只要在联合类型中追加对应React.ReactElement<对应Props类型, typeof 组件名>的条目即可。

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