TypeScript中判断值存在后操作数组的正确简写方式是什么？

你原本的&&写法是可行的，目前TypeScript基于ES规范提供了更简洁的标准写法：

场景1：允许处理结果为undefined/null #

直接使用**可选链运算符（?.）**即可，和你原本的&&写法完全等效，语法更简洁：

// 原&&写法
const validOptLangCombinations = optArr && optArr.map(item => `${item.CourseId}-${item.Component.LanguageCode}`);
// 等效可选链写法
const validOptLangCombinations = optArr?.map(item => `${item.CourseId}-${item.Component.LanguageCode}`);

你贴出的报错是因为问题代码中未添加?.就直接调用了optArr.map，并非可选链写法本身的问题。

场景2：要求处理结果一定为数组（避免后续操作再次报非空错误） #

可选链搭配空值合并运算符（??），给空值场景指定默认空数组，是目前最推荐的工业级写法：

const validOptLangCombinations = optArr?.map(item => `${item.CourseId}-${item.Component.LanguageCode}`) ?? [];

这个写法的优势是返回值永远是数组类型，TypeScript会自动推导类型为Array<xxx>，而非联合类型Array<xxx> | undefined，后续不需要重复做非空判断。

额外优化提示 #

你代码中find方法的返回值可能为undefined，直接取Components属性也有概率触发报错，建议也加上可选链：

data = data?.map(item => ({
  ...item,
  ComponentName: this.rowData.componentsData.find(i => i.ComponentId === item.ComponentId)?.Components
})) ?? [];

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