如何为HTML元素列表设置类型？——React中<select>组件<option>元素数组的类型定义方案

嘿，这个问题我刚入门TS的时候也踩过坑！其实很简单，你只需要把数组的类型从any[]换成JSX.Element[]或者React.ReactElement[]就可以了——这两个都是React用来描述JSX元素的标准类型，完全符合TypeScript的类型规范。

为什么这么改？ #

你现在往数组里push的是React的<option>元素，本质上是JSX节点，TypeScript专门提供了JSX.Element类型来定义这类元素。用any[]虽然能跑起来，但会丢掉TS最核心的类型检查优势；换成正确的类型后，编辑器还能给你补全提示，避免不小心推入非JSX元素的错误。

修改后的代码示例 #

// 推荐写法：直接用JSX.Element[]（TSX文件中全局可用）
let items: JSX.Element[] = [];
for (let i = 0; i <= 30; i++) {
  items.push(<option key={i} value={i}>{i}</option>);
}

// 等价写法：用React.ReactElement[]（适合已导入React的场景）
import React from 'react';

let items: React.ReactElement[] = [];
for (let i = 0; i <= 30; i++) {
  items.push(<option key={i} value={i}>{i}</option>);
}

额外小提示 #

如果你的文件是.tsx格式，JSX.Element是全局可用的（只要tsconfig.json里开启了jsx配置）；如果是.ts文件，记得先导入React，或者确保TS配置正确识别JSX语法。

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