开启noUncheckedIndexedAccess时TypeScript数组倒序遍历的最优方案

报错原因 #

开启noUncheckedIndexedAccess编译选项后，TypeScript 不会默认认定数组索引访问的结果一定存在，所有通过下标取出的数组元素都会被自动推导为「元素类型 | undefined」的联合类型。原写法中arr[i]被推导为number | undefined，和doSomething要求的number入参类型不匹配，因此触发编译报错。

最优实现方案 #

按不同使用场景优先级排序：

• 场景1：常规业务场景，确定数组不存在空槽、循环下标不会越界
  最推荐改动最小、无额外性能开销的非空断言写法：

  function doSomething(i: number): void {
    // 业务逻辑实现
  }
  
  const arr = [1, 2, 3];
  for (let i = arr.length - 1; i >= 0; --i) {
    // 非空断言! 明确告诉TS当前索引对应的元素一定存在
    doSomething(arr[i]!);
  }
  

  这种写法和原生JS执行效率完全一致，仅增加了一个编译期的类型标记，没有运行时代价。

• 场景2：偏好无断言的简洁写法，数组长度不大
  可以用ES2023新增的toReversed方法生成倒序的新数组后直接遍历，TS可以自动推导元素类型，不需要额外类型处理：

  arr.toReversed().forEach(item => {
    doSomething(item);
  })
  

  这种写法可读性最高，缺点是会生成临时的倒序数组，十万级以上元素的超大数组场景下会有可感知的内存和性能损耗，普通业务场景可以忽略。

• 场景3：数组可能存在空槽，需要最严谨的类型校验
  增加类型守卫判断，过滤掉undefined的情况即可：

  for (let i = arr.length - 1; i >= 0; --i) {
    const item = arr[i];
    if (item !== undefined) {
      doSomething(item);
    }
  }
  

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