TypeScript获取可选可空数组首元素报TS1005错误如何解决

现有如下可选数组类型声明：

episodes?: Episode[];

在函数中尝试用以下两种写法获取数组第一个元素时，均抛出编译错误：

let episode: Episode = this.episodes?[0];
var episode = this.episodes?[0];

报错信息：

Error: src/app/episodes/episodes.component.ts:30:45 - error TS1005: ':' expected.

可选链操作符的标准语法是?.，访问数组下标、动态属性时的完整写法为?.[下标/属性名]。
你写的?[0]遗漏了可选链的.符号，编译器会将单独的?识别为三元运算符的起始标记，因此会提示缺少三元运算符要求的:分隔符。

根据业务对类型的要求，可选择以下适配写法：

• 基础语法修正，返回值类型自动推导为Episode | undefined，无需额外处理边界时直接用：

  const episode = this.episodes?.[0];
  

  该写法在episodes为undefined时，episode会返回undefined，不会触发运行时报错。
• 如果要求变量类型必须为Episode，需要补充空值兜底逻辑，不能直接给可选链返回值标注Episode类型（可选链返回值本身包含undefined类型，直接赋值会报类型不匹配错误）：

  // 写法1：通过空值合并运算符设置符合Episode类型的默认值
  const episode: Episode = this.episodes?.[0] ?? yourDefaultEpisodeValue;
  
  // 写法2：提前做空值判断，处理边界场景
  let episode: Episode;
  if (this.episodes?.length) {
    episode = this.episodes[0];
  } else {
    // 此处处理数组不存在、为空的逻辑，比如赋值默认值、抛出业务错误等
    throw new Error('episodes不存在或无有效元素');
  }
  

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