TypeScript中typeof与keyof结合的类型差异及原理问询

先看示例代码：

class Test {
  s1 = "Hello"
  static s2 = 16
}

type t1 = typeof Test[keyof typeof Test]
type t2 = Test[keyof Test]

已知t1的类型是Test | number，t2的类型是string，下面拆解两者的差异及背后逻辑：

一、两种类型的实际差异 #

• t2的类型推导逻辑：
  Test在这里代表类的实例类型，keyof Test会提取类的所有实例成员的键名，也就是"s1"。因此Test[keyof Test]等价于Test["s1"]，最终得到s1的类型string。

• t1的类型推导逻辑：
  typeof Test获取的是类构造函数的类型，这个类型包含了类的所有静态成员，还包含prototype属性（其类型为类的实例类型Test）。keyof typeof Test会提取该构造函数类型的所有可枚举属性键，这里就是"s2"和"prototype"。所以typeof Test[keyof typeof Test]等价于typeof Test["s2"] | typeof Test["prototype"]，也就是number | Test，即联合类型Test | number。

二、typeof Test的返回内容 #

typeof Test返回的是类构造函数的完整类型，包含三部分核心内容：

• 类的所有静态成员（比如示例中的s2: number）；
• 构造函数的实例化签名（支持通过new关键字创建Test类型的实例）；
• 构造函数自带的属性（比如prototype、name等，其中prototype的类型对应类的实例类型Test）。

它并不是“静态成员类型+类本身”的简单组合，而是描述了类构造函数本身的完整类型信息。

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