为何TypeScript调用数组指定索引时不检测undefined？求检测方案

针对你遇到的TypeScript未检测数组为空时索引访问导致运行时错误的问题，可以通过以下几种方式解决：

1. TypeScript 编译器配置 #

启用noUncheckedIndexedAccess编译器选项，这会让TypeScript将数组的索引访问结果标记为T | undefined，即使数组本身被定义为非空类型。

修改tsconfig.json配置：

{
  "compilerOptions": {
    "strictNullChecks": true, // 需先开启严格空检查作为基础
    "noUncheckedIndexedAccess": true
  }
}

开启后，article.posts?.[0].url会被TypeScript直接标记为错误——因为posts?.[0]可能是undefined，必须添加可选链?.，也就是你提供的正确代码写法。

2. ESLint 插件补充检测 #

结合ESLint的TypeScript插件，可以进一步强化这类问题的检测：

• @typescript-eslint/no-unsafe-member-access: 禁止对可能为undefined/null的值进行不安全的成员访问，能精准捕捉到未加可选链的情况。

在.eslintrc.js中配置规则：

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  rules: {
    '@typescript-eslint/no-unsafe-member-access': 'error',
  },
};

3. 编辑器增强插件 #

• VS Code 内置TypeScript插件: 开启上述TypeScript配置后，编辑器会直接在代码中提示错误，无需额外插件。
• Error Lens: 可将TypeScript/ESLint的错误、警告直接显示在代码行下方，更直观地提醒你遗漏的可选链。

通过以上配置，就能在编码或编译阶段提前检测到这类可能引发运行时错误的代码，强制你添加必要的空值防护。

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