TypeScript中可选链操作未返回undefined类型问题咨询

问题原因 #

TypeScript 默认情况下，数组索引访问的类型推断仅返回元素本身的类型，不会自动包含undefined——哪怕访问的索引超出数组实际长度。所以当你用arr[2]?.[5]时，TypeScript 只会考虑arr[2]可能为undefined的情况，但假设arr[2]存在时，直接将arr[2][5]的类型推断为A，忽略了子数组索引越界导致的undefined可能性。

解决方案 #

方案1：开启noUncheckedIndexedAccess编译选项 #

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

在tsconfig.json中修改配置：

{
  "compilerOptions": {
    "noUncheckedIndexedAccess": true
  }
}

开启后，你的代码里arr[2]?.[5]的类型会自动变为A | undefined，同时覆盖外层数组索引越界、内层数组索引越界两种导致undefined的场景。

方案2：手动定义数组为可选元素类型 #

如果你不想全局修改编译规则，可以直接调整数组的类型定义，让子数组的元素允许为undefined：

type A = {
    owner?: string,
    feline?: string
}

// 子数组元素类型设为 A | undefined
const arr: Array<Array<A | undefined>> = []

const item = arr[2]?.[5]; // 类型为 A | undefined

也可以用更简洁的等价写法：

const arr: (A | undefined)[][] = []

方案3：用类型守卫手动校验索引 #

如果需要更精细的控制，可以编写类型守卫函数，手动检查索引是否在数组的有效范围内：

type A = {
    owner?: string,
    feline?: string
}

const arr: Array<Array<A>> = []

// 类型守卫：判断索引是否在数组有效范围内
function isValidIndex<T>(arr: T[], index: number): index is keyof typeof arr {
    return index >= 0 && index < arr.length;
}

let item: A | undefined;
if (isValidIndex(arr, 2) && isValidIndex(arr[2], 5)) {
    item = arr[2][5];
} else {
    item = undefined;
}
// 此时 item 的类型为 A | undefined

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