为什么TypeScript无法检测读取空数组元素时的类型错误？

问题根源 #

TypeScript默认不会将数组索引访问的结果标记为可能的undefined，因为它无法静态追踪数组在运行时的长度变化（比如数组可能被动态添加/删除元素）。但在你这种明确为空数组的场景下，确实需要类型检查来避免潜在的运行时错误。

具体解决办法 #

1. 启用noUncheckedIndexedAccess编译选项 #

这是最彻底的解决方案，开启后TypeScript会自动将所有数组索引访问的结果类型加上undefined。

在tsconfig.json中配置：

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

配置后，你的代码中aUser的类型会变成User | undefined，访问aUser.name时TypeScript会直接抛出类型错误，强制你处理undefined的情况。

2. 使用可选链与空值合并操作符 #

如果不想全局修改编译配置，可以在代码中手动处理可能的undefined：

// 可选链?.会在aUser为undefined时停止访问，返回undefined
// 空值合并??可以提供默认值
console.log(aUser?.name ?? '未知用户')

3. 类型守卫或非空断言 #

• 类型守卫：通过条件判断缩小类型范围，让TypeScript知道aUser在代码块内一定是User类型：

if (aUser) {
  // 此处aUser的类型被推断为User
  console.log(aUser.name)
}

• 非空断言：如果你能100%确定aUser不会是undefined（比如数组一定有元素），可以用!断言排除undefined，但注意这会跳过类型检查，运行时如果实际是undefined仍会报错：

console.log(aUser!.name)

4. 使用Array.at()方法替代直接索引 #

at()方法是ES2022引入的数组方法，它返回的类型会自动包含undefined（当索引越界时），TypeScript能正确识别这个类型：

const aUser = arrayUsers.at(0)
// aUser的类型为User | undefined，访问name时会触发类型检查
console.log(aUser.name) // 此处会被TS检测到错误

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