在TypeScript中如何定义类型确保React元素必须带有key属性

你之前的写法不生效的原因是：key 是 React 内置的特殊属性，不属于组件的普通 props 范畴，React.ReactElement 的第一个泛型参数约束的是元素的普通 props 类型，无法覆盖到 key 属性的校验。

可以直接通过交叉类型重写 ReactElement 本身的 key 属性约束实现需求，正确定义如下：

type ReactElementWithKey = React.ReactElement & { key: React.Key };

效果验证：

// 符合要求，无报错
const foo: ReactElementWithKey = <div key="some key"></div> 

// 缺少非空 key 属性，TypeScript 会抛出错误
const bar: ReactElementWithKey = <div></div> 

这个定义对原生 DOM 元素、自定义组件元素、以及 React.createElement 生成的元素都生效，不需要额外修改其他配置。

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