Angular静态方法引发单元测试失败，ES2022环境下如何修复？

现有Angular服务代码：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class TestService {
  static generate(url: string, response: string): string[] {
    return [url + response];
  }

  static testField = TestService.generate('aaa', 'vvv');
}

对应的单元测试代码：

import { TestBed } from '@angular/core/testing';

import { TestService } from './test.service';

fdescribe('TestService', () => {
  let service: TestService;

  beforeEach(() => {
    TestBed.configureTestingModule({});
    service = TestBed.inject(TestService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });
});

当tsconfig中target设为ES2022且保留useDefineForClassFields: false时，运行单元测试会报错：Uncaught TypeError: Cannot read properties of undefined (reading 'generate')。需要在保留ES2022目标版本、静态testField和generate方法的前提下解决该问题。

ES2022的类字段初始化机制与旧版本存在差异：静态字段按声明顺序执行初始化，当初始化testField时，TestService类本身还未完成完整的初始化绑定，此时直接用类名TestService调用静态方法会触发未定义错误。

方案1：用this替代类名调用静态方法 #

静态字段初始化阶段，this指向当前类的构造函数（即TestService本身），可以安全调用静态方法：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class TestService {
  static generate(url: string, response: string): string[] {
    return [url + response];
  }

  // 用this代替TestService调用静态方法
  static testField = this.generate('aaa', 'vvv');
}

方案2：将静态字段改为getter延迟初始化 #

通过getter延迟testField的初始化时机，直到首次访问该字段时才调用generate方法，此时类已完成初始化：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class TestService {
  static generate(url: string, response: string): string[] {
    return [url + response];
  }

  // 改为getter，延迟初始化
  static get testField() {
    return TestService.generate('aaa', 'vvv');
  }
}

方案3：调整useDefineForClassFields配置 #

如果不想修改代码，可以在tsconfig.json中显式设置useDefineForClassFields: true，让TypeScript遵循ES2022类字段标准，避免初始化顺序导致的未定义问题：

{
  "compilerOptions": {
    "target": "ES2022",
    "useDefineForClassFields": true,
    // 其他配置...
  }
}

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