为何TypeScript中[]运算符可实现类型收窄，at()函数却不行？

问题代码 #

type ListItem = {
  a: string
  b: number
}

type Props = Array<ListItem> | Array<Array<ListItem>>

function test (param: Props) {
  if('a' in param[0]) {
    const item: ListItem = param[0]
  }

  const firstItemOperator: ListItem | Array<ListItem> = param[0]
  const firstItemAt: ListItem | Array<ListItem> | undefined = param.at(0)

  if(Array.isArray(param[0])) {
    const item: ListItem[] = param[0]
  }

  if(Array.isArray(param.at(0))) {
    // 为何此处报错？
    const item: ListItem[] = param.at(0)
  }
}

问题现象 #

定义Props为ListItem一维数组或二维数组时：

• 使用[]索引运算符访问元素，通过Array.isArray这类类型守卫可以正常完成类型收窄；
• 使用at()方法访问元素时，即便通过Array.isArray()判断返回值为数组，仍无法将param.at(0)的类型收窄为ListItem[]，触发类型错误。

原因解析 #

核心原因在于TypeScript控制流分析的能力限制：

1. 索引访问的类型收窄逻辑：param[0]是对数组索引属性的直接访问，TypeScript会将这个访问操作与param本身的类型绑定。当通过Array.isArray(param[0])判断时，TypeScript能反向收窄param的类型为ListItem[][]，从而确定param[0]必然是ListItem[]。
2. 方法调用的类型收窄限制：param.at(0)是方法调用，TypeScript无法跟踪该方法返回值与原数组param的类型关联。在if(Array.isArray(param.at(0)))条件中，TypeScript仅能判断当前调用的返回值是数组，但无法将这个判断结果关联到param的原始类型，因此无法推断出param此时必然是ListItem[][]，也就无法确定param.at(0)的具体类型。

另外，at()方法的返回值可能为undefined（索引越界场景），进一步增加了类型推断的复杂度，但这不是核心问题。

相关背景议题说明：

• 议题#53395：聚焦ReadonlyArray场景的类似问题，但本次案例已排除该场景；
• 议题#42384：明确了TypeScript当前无法对方法调用的返回值进行跨条件的类型关联，是该问题的本质原因。

临时解决方案 #

先将at()的返回值赋值给临时变量，再对临时变量进行类型判断与收窄：

function test (param: Props) {
  const firstItem = param.at(0);
  if(Array.isArray(firstItem)) {
    const item: ListItem[] = firstItem; // 类型收窄正常
  }
}

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