如何定义JSX元素数组？寻找无需导入ReactElement的简化类型方案

你完全不用每次都导入ReactElement来解决这个问题！在配置好React的TypeScript项目里，直接使用**JSX.Element**这个全局类型就可以了——它是TypeScript为JSX环境内置的类型，无需额外导入任何模块。

直接看修改后的代码示例：

const arrayOfJsxElements: JSX.Element[] = [];
arrayOfJsxElements.push(<div>hi</div>);

为什么这个方案可行？ #

当你的tsconfig.json中jsx选项设置为react-jsx（React 17+推荐）或react时，TypeScript会自动启用全局的JSX命名空间，JSX.Element就是专门用来表示所有JSX元素的类型，和你之前导入的ReactElement是等价的，但省去了每次手动导入的麻烦。

而且这个类型兼容性很好，不管你push的是原生HTML元素（比如<div>）、自定义函数组件的返回结果，还是类组件的实例，JSX.Element[]都能完美容纳。

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