在TypeScript+React中按索引获取数组元素的问题求助

错误原因 #

你遇到的报错核心是：departure被定义为单个对象类型{ code: string; name: string; dateTime: string; }，但你试图用数字索引（0、1）去访问它。TypeScript不允许用数字索引访问非数组/类数组类型的对象，因此抛出“隐式any类型”的错误。

两种解决方案 #

方案1：修正departure为对象数组（最可能符合你的需求）

如果你的业务逻辑中departure本就应该是包含两个对象的数组（比如出发地和目的地），需要调整类型定义为数组：

// 先定义单个项的类型
type TripPoint = {
  code: string;
  name: string;
  dateTime: string;
};

// 将departure定义为TripPoint数组
const departure: TripPoint[] = [
  { code: "PEK", name: "北京首都机场", dateTime: "2024-06-01 09:00" },
  { code: "CAN", name: "广州白云机场", dateTime: "2024-06-01 12:30" }
];

// 现在可以安全使用索引访问
<div>{departure[0].name}</div>
<div>{departure[1].dateTime}</div>

建议加上可选链避免数组越界：departure[0]?.name，防止数组长度不足时报错。

方案2：将单个对象的属性值转为数组（如果departure确实是单个对象）

如果departure就是单个对象，但你想按顺序获取它的属性值（比如把code、name对应0、1索引），可以把对象的属性值提取为数组：

const departure = { code: "PEK", name: "北京首都机场", dateTime: "2024-06-01 09:00" };

// 手动构造固定顺序的属性值数组（推荐，顺序可控）
const departureValues = [departure.code, departure.name, departure.dateTime];

// 或者用Object.values（注意属性顺序由对象枚举顺序决定）
// const departureValues = Object.values(departure);

// 此时可以用索引访问
<div>{departureValues[0]}</div>
<div>{departureValues[1]}</div>

为什么keyof方案无效？ #

keyof获取的是对象的属性名类型（即"code" | "name" | "dateTime"），而你用的是数字索引，两者类型不匹配，因此无法解决问题。

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