Angular 15适配ES2022时类装饰器失效及CLI警告问题求助

当前时间2023年3月，需求是让类装饰器正常工作且无CLI警告。此前在Angular 15版本之前，目标ES2021及以下版本时，装饰器能正常触发Alert A和Alert B，且无任何警告。升级到Angular 15后：

• 仍设置目标ES2021时，装饰器功能正常，但CLI提示已覆盖target和useDefineForClassFields配置
• 修改tsconfig.json为"target": "ES2022"、"useDefineForClassFields": false后，CLI警告消失，但仅触发Alert A，装饰器的构造函数逻辑（Alert B）未执行，怀疑useDefineForClassFields设置被忽略

咨询以下两个问题：

1. 能否在Angular 15/ES2022环境中原生使用类装饰器？
2. 若不能，如何正确配置useDefineForClassFields以避免CLI警告？

解答 #

问题1：Angular 15 + ES2022下能否原生使用类装饰器？ #

可以，但需注意ES2022类字段定义规范的差异。当target设为ES2022时，TypeScript默认启用useDefineForClassFields: true，该模式下类装饰器的执行逻辑会改变——不再自动调用类的构造函数逻辑（即Alert B部分），这是因为ES2022的类字段初始化机制与旧版语义不同。

问题2：正确配置useDefineForClassFields消除CLI警告 #

Angular 15会自动管理部分TypeScript配置，直接在tsconfig.json的顶层compilerOptions中设置useDefineForClassFields可能被内置配置覆盖。正确做法是：

• 在tsconfig.json的angularCompilerOptions中添加该配置，而非顶层compilerOptions。示例配置：

{
  "compilerOptions": {
    "target": "ES2022"
  },
  "angularCompilerOptions": {
    "useDefineForClassFields": false
  }
}

配置后，Angular CLI不会再抛出配置覆盖警告，同时类装饰器的构造函数逻辑（Alert B）也能正常触发。

额外说明：如果你的装饰器依赖旧版TypeScript类字段语义实现，保持useDefineForClassFields: false是必要的，直到你将装饰器适配到ES2022的类字段规范。

内容的提问来源于stack exchange，提问作者M'sieur Toph'