TypeScript类嵌套静态属性访问报错原因咨询

问题重现 #

TypeScript代码 #

class Hey {
  static a: string
  static b: string
  static c: string
  static setABC(a: string, b: string, c: string) {
    this.a = a
    this.b = b
    this.c = c
    return this
  }
}
class A {
  static prop1: Hey
  static setFields() {
    this.prop1 = Hey.setABC('aee', 'bee', 'cee')
    return this
  }
}
A.setFields()
console.log(A.prop1.a)

编译错误 #

Property 'a' does not exist on type 'Hey'. Did you mean to access the static member 'Hey.a' instead?

可正常运行的JavaScript代码 #

"use strict";
class Hey {
    static setABC(a, b, c) {
        this.a = a;
        this.b = b;
        this.c = c;
        return this;
    }
}
class A {
    static setFields() {
        this.prop1 = Hey.setABC('aee', 'bee', 'cee');
        return this;
    }
}
A.setFields();
console.log(A.prop1.a);

用户尝试使用类型断言console.log((A.prop1 as Hey).a);仍无法解决问题，疑问：为何该逻辑在JavaScript中可正常运行，却在TypeScript中被禁止？

原因分析 #

1. TypeScript对类类型的严格区分
   在TypeScript中，Hey这个标识符代表的是类的实例类型，而包含静态成员的类本身（构造函数对象）的类型是typeof Hey。你将A.prop1的类型声明为Hey，意味着它应该是Hey类的一个实例，但Hey.setABC()返回的this是Hey类本身（构造函数对象），属于typeof Hey类型。实例类型Hey上并未定义a、b、c这些静态属性，因此TypeScript会抛出属性不存在的错误。

2. JavaScript无静态类型检查
   JavaScript是动态类型语言，运行时只关注实际值的结构。Hey.setABC()返回的Hey类对象上确实存在a、b、c属性，所以代码能正常执行，不会报错。

3. 类型断言无效的原因
   你使用(A.prop1 as Hey)只是将其断言为实例类型Hey，而非类本身的typeof Hey类型，TypeScript依然会认为该值不具备静态属性，因此报错无法消除。

解决方案 #

将A.prop1的类型声明改为typeof Hey，让TypeScript识别出它是Hey类本身而非实例：

class A {
  static prop1: typeof Hey
  static setFields() {
    this.prop1 = Hey.setABC('aee', 'bee', 'cee')
    return this
  }
}

修改后，TypeScript就能正确识别prop1的类型，允许访问其静态属性a，编译错误会消失。

内容的提问来源于stack exchange，提问作者Islam Y-