TypeScript中如何处理稀疏数组的undefined取值及类型报错

报错根因拆解 #

TypeScript 对常规数组的类型推导，基于“数组所有下标位置都存在有效元素、值类型严格匹配标注的元素类型”这一默认假设，完全没有内置适配 JavaScript 原生稀疏数组的特殊运行时行为：

• 带空洞的稀疏数组，读取空洞位置的下标值，运行时返回结果固定为undefined
• 你将数组标注为number[]时，TS 会把indices.map(i => arr[i])的返回值推导为number[]，后续调用.includes()时参数类型被严格限定为number，传入undefined就会触发Argument of type 'undefined' is not assignable to parameter of type 'number'的编译错误。

适配方案对比 #

方案1：全局放宽元素类型（临时绕开） #

也就是当前在用的写法：将数组标注为(number | undefined)[]，让arr[i]的推导类型直接包含undefined，快速绕过编译报错。
该方案的明确副作用是：TS 会默认数组所有位置的元素都可能为undefined，强制要求你在所有读取元素的位置添加判空逻辑，丢失对“已填充位置的元素是确定非空类型”的校验能力，很容易因遗漏判空埋下运行时 bug。

方案2：精准索引签名适配（无副作用写法） #

不需要全局放宽数组的类型校验，直接通过索引签名精准匹配稀疏数组的运行时行为，既保留已填充元素的类型校验能力，又覆盖空洞位置读取返回undefined的实际场景：

• 已通过下标赋值填充的位置，元素类型保持为number，原有校验逻辑完全生效
• 未填充的空洞位置，读取值的类型匹配为undefined，和运行时行为一致
  具体类型定义写法：

// 适配稀疏数值数组的专用类型
type SparseNumberArray = {
  // 任意下标读取结果可能是已赋值的number，也可能是空洞返回的undefined
  [index: number]: number | undefined
  // 保留数组原生length属性的类型校验
  length: number
}

实际使用示例：

// 替换原有的number[]标注为稀疏数组类型
let arr: SparseNumberArray = []
arr[2] = 5

let indices: number[] = [1, 2]
console.log(
  indices.map(i => arr[i])
    .includes(undefined)
)
// 编译完全通过，运行时输出符合预期：true

该方案的特性：

• 不会触发过度校验：当你明确知道某个下标位置已经被赋值时，TS 依然可以识别该位置的非空类型，比如arr[2].toFixed(2)这类对非空元素的方法调用，不会被强制要求添加无意义的判空逻辑
• 无运行时代码开销，完全是编译层面的类型适配

场景认知提醒 #

JavaScript 中两类“下标值为undefined”的场景存在本质区别：

手动给数组下标赋值undefined的数组，和跳下标创建空洞的稀疏数组，可以通过1 in arr的存在性判断区分，但两者通过下标读取的返回值完全一致，都是undefined。TypeScript 目前不会专门区分这两类场景，只要适配读取时的返回值类型，就可以覆盖全场景的类型校验需求。

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