Angular 15中同一类访问静态变量报TypeError问题求助

问题还原 #

在DemoService类中定义静态成员时，尝试用DemoService.demo1.ACTIVITY初始化另一个静态变量，升级到Angular 15后出现DemoService未定义的运行时错误，该结构在旧版本Angular中可正常使用。

export class DemoService {

  public static demo1 = {
    ACTIVITY: 'ACTIVITY'
  };

  public static anotherVariable: Array<Model> = [{
      title: DemoService.demo1.ACTIVITY // 报错行
  }]

}

解决办法 #

1. 使用静态上下文的this引用 #

静态成员初始化阶段，类本身尚未完成定义，直接通过类名访问会触发未定义错误。改用this指代静态类上下文即可：

export class DemoService {

  public static demo1 = {
    ACTIVITY: 'ACTIVITY'
  };

  public static anotherVariable: Array<Model> = [{
      title: this.demo1.ACTIVITY // 替换为this
  }]

}

2. 延迟初始化静态变量 #

如果必须通过类名访问，可以将变量初始化放在静态代码块中，确保类定义完成后再执行赋值逻辑：

export class DemoService {

  public static demo1 = {
    ACTIVITY: 'ACTIVITY'
  };

  public static anotherVariable: Array<Model>;

  // 静态代码块在类定义完成后执行
  static {
    DemoService.anotherVariable = [{
      title: DemoService.demo1.ACTIVITY
    }];
  }

}

3. 检查TypeScript编译配置 #

Angular 15通常对应TypeScript 4.8+版本，该版本加强了静态初始化的时序检查。若项目开启了strictPropertyInitialization等严格模式选项，需确保静态成员初始化逻辑符合TypeScript规范；若暂需兼容旧逻辑，可临时关闭该选项（不推荐长期使用）。

原因说明 #

早期Angular对应的TypeScript版本对静态成员初始化时的类名引用有宽松处理，但TypeScript 4.8+严格遵循了类初始化的时序规则：静态成员初始化时，类本身仍处于定义过程中，此时直接通过类名访问会导致未定义错误。Angular 15的升级同步收紧了这一逻辑，暴露了原本的隐式问题。

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