如何在TypeScript中类型化可能为空的对象数组并触发严格访问检查？

为什么默认不报错？ #

没错，这确实是TypeScript的设计限制——编译时无法确定数组在运行时的实际长度，所以默认情况下，数组索引访问arr[i]会直接返回元素类型（比如{foo: string}），而不会自动包含undefined。TypeScript默认假设你访问的索引是有效的，这是兼顾开发效率和类型安全性的权衡结果。

更严格的类型定义方式 #

有几种方法可以让这类访问触发TypeScript错误：

1. 开启noUncheckedIndexedAccess编译选项 #

这是最简单有效的全局解决方案。在你的tsconfig.json中开启该选项：

{
  "compilerOptions": {
    "noUncheckedIndexedAccess": true,
    // 其他编译选项...
  }
}

开启后，任何数组的索引访问都会返回T | undefined，比如arr[0]的类型变为{foo: string} | undefined，此时访问arr[0].foo就会触发TypeScript错误，提示你可能访问了undefined的属性。

2. 自定义严格数组类型（局部生效） #

如果你不想全局修改编译选项，可以定义一个自定义数组类型，强制索引访问返回T | undefined：

type StrictArray<T> = Array<T> & {
  [index: number]: T | undefined;
};

// 使用这个类型定义数组
const arr: StrictArray<{foo: string}> = [];
arr[0].foo; // 这里会触发错误：对象可能为 'undefined'

这种方式只会影响使用StrictArray类型的数组，不会全局改变其他数组的行为。

3. 手动检查元素是否存在（运行时安全） #

在访问属性前，先显式检查数组元素是否存在，这也是最安全的运行时做法：

const arr: {foo: string}[] = [];

// 方式一：条件判断
if (arr[0]) {
  console.log(arr[0].foo); // 这里不会报错
}

// 方式二：可选链操作符
console.log(arr[0]?.foo); // 即使arr[0]是undefined，也不会报错，返回undefined

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