如何在TypeScript中对可能为空的数组进行类型建模

现有写法的问题 #

1. 类型语法错误：TypeScript 类型系统中联合类型使用单个竖线|，你写的A[] || []不是合法的类型定义，会导致apiData被推断为any类型，自然不会触发任何类型校验，这是你现在非法访问不报错的核心原因。
2. 语义重复：A[]本身就已经包含空数组的情况，不需要额外联合空数组类型。

解决方案 #

根据你的需求可以选择以下两种适配方案：

场景1：允许返回任意长度的A类型数组（包括空数组）

直接修正类型定义即可，此时如果你访问apiData[0].a，TS本身就会提示A类型不存在a属性：

const apiData: A[] = await fetchApi()
const b = apiData[0].a // 会直接触发类型错误：类型A上不存在属性a

如果要进一步让TS校验数组下标访问可能为undefined的情况，在tsconfig.json中开启noUncheckedIndexedAccess配置：

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

开启后访问apiData[0].a会额外提示：对象可能为undefined，符合你对空数组下非法访问的校验要求。

场景2：严格限定返回值只能是空数组，或者至少有一个元素的A类型数组

先定义非空数组类型，再联合空数组：

type NonEmptyArray<T> = [T, ...T[]]
const apiData: NonEmptyArray<A> | [] = await fetchApi()

此时哪怕不开启noUncheckedIndexedAccess，apiData[0]的类型也会被推断为A | undefined，直接访问apiData[0].a会触发两种类型错误。

安全访问示例 #

你可以通过长度判断收窄类型，避免运行时报错：

if (apiData.length) {
  console.log(apiData[0].b) // 类型正常，不报错
  console.log(apiData[0].a) // 触发类型错误：A类型不存在a属性
}

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