为何TypeScript无法对该索引签名进行类型收窄？

问题场景 #

先看这个带联合类型的索引签名定义：

type Foo = { [key: string]: number | { [key: string]: number } }[];

当尝试对它进行类型收窄时，会遇到类型报错：

const foo = (arr: Foo, outer: string, inner: string) => {
  arr.forEach((element) => {
    if(typeof element[outer] === 'number') {
      // element[outer] 是 number 类型
    }
    else if(!element[outer]) {
      // element[outer] 是 falsy 值（比如 undefined）
    }
    else {
      // 理论上TS应该识别出 element[outer] 是结构完整的对象，但实际报错
      console.log(element[outer]?.[inner]);
    }
  });
};

报错信息如下：

Element implicitly has an 'any' type because expression of type
'string' can't be used to index type 'number | { [key: string]:
number; }'.

No index signature with a parameter of type 'string' was found on
type 'number | { [key: string]: number; }'.ts(7053)

对比官方文档里类型收窄正常生效的示例：

function padLeft(padding: number | string, input: string): string {
  if (typeof padding === "number") {
    return " ".repeat(padding) + input;
  }
  return padding + input;
}

编辑补充：有一种解决方案是把索引访问的结果赋值给局部变量，就能让类型收窄生效：

const foo2 = (arr: Foo, outer: string, inner: string) => {
  arr.forEach((element) => {
    const outerValue = element[outer]; // 关键步骤！
    if(typeof outerValue === 'number') {
      // outerValue 是 number 类型
    }
    else if(!outerValue) {
      // outerValue 是 falsy 值（比如 undefined）
    }
    else {
      // 这里TS能正确识别 outerValue 是对象类型
      console.log(outerValue[inner]);
    }
  });
};

原因解析 #

1. 索引访问的不稳定性 #

TypeScript的类型收窄依赖值的引用稳定性。在第一个代码片段中，每次访问element[outer]时，TS无法保证这个值不会发生变化：哪怕刚判断完它的类型，element作为可变对象，也可能在判断和后续访问之间被其他代码修改，导致类型改变。

而官方示例里的padding是直接的函数参数，属于不可变的局部值（没有重新赋值操作），TS可以放心地对它进行类型收窄。

2. 索引签名的类型推断限制 #

对于{ [key: string]: number | { [key: string]: number } }这种索引签名类型，TS每次处理element[outer]时，都会重新计算它的类型为number | { [key: string]: number } | undefined（因为索引可能不存在）。就算通过typeof和非空判断排除了number和undefined，TS也没法把这个收窄结果关联到后续的element[outer]访问上——它会把每一次索引访问都当成独立的类型计算，不会跟踪同一个索引的收窄结果。

3. 局部变量为什么能解决问题？ #

当把element[outer]赋值给const声明的局部变量outerValue后，这个变量是不可变的常量。TS可以确定它的值在声明后不会被修改，于是会把类型收窄的结果绑定到这个变量上：

• 第一个分支排除了number类型，
• 第二个分支排除了falsy值（包括undefined），
• 进入else分支时，TS就能确定outerValue的类型必然是{ [key: string]: number }，自然允许用inner索引访问它。

简单来说，局部常量的引用稳定性让TS可以安全保留类型收窄的结果，而直接访问对象索引的方式做不到这一点，所以导致收窄失效。

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