如何从TypeScript数组中提取对象属性值？

问题分析 #

你目前的代码存在几个关键问题：

1. 变量名不一致：声明的变量是eventId，但后续使用的是eventArray，属于笔误。
2. filter方法用法错误：filter需要传入一个回调函数来判断条件，而非直接传入any.eventId（any是类型关键字，不能当作变量访问）。
3. 未处理undefined情况：eventId的类型是any[] | undefined，直接操作可能触发运行时错误。
4. 类型不够明确：使用any[]会丢失TypeScript的类型校验能力，不利于代码维护。

解决方案 #

1. 定义明确的类型接口（推荐）

先为查询结果定义TypeScript接口，替代any类型：

interface Event {
  eventId: number;
  description: string;
  dateCreated: string;
}

2. 修正变量声明与类型

// 将变量名改为更语义化的events，同时指定类型
const events: Event[] | undefined = await runQuery(
  "SELECT * FROM event WHERE `description` = (?)",
  [name]
);

3. 处理空值与提取属性

先判断数组是否存在且有数据，再根据需求提取或过滤：

• 提取所有eventId值：

if (events?.length) {
  const eventIds = events.map(event => event.eventId);
  // 示例结果：[29]
}

• 过滤特定eventId的对象：

if (events?.length) {
  const filteredData = events.filter(event => event.eventId === 29);
  // 示例结果：[{eventId: 29, description: 'Omer', dateCreated: '2023-12-14T13:09:07.000Z'}]
}

• 直接获取第一个对象的eventId：
  如果你的SQL查询只会返回一条数据，可以直接取数组第一项：

if (events?.length) {
  const targetEventId = events[0].eventId;
  // 示例结果：29
}

内容的提问来源于stack exchange，提问作者Samurai-J