Angular 15更新后，Typescript的目标警告

我把我的Angular应用程序更新到了Angular 15。它构建得很好--除非有一些警告，如：

TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022" and "false" respectively by the Angular CLI.

我的tsconfig.json将目标设定为ES6：

{
  ...
  "compilerOptions": {
      "target": "ES6",
      ...
  }
}

文件中说：

Internally the Angular CLI now always set the TypeScript target to ES2022 and useDefineForClassFields to false unless the target is set to ES2022 or later in the TypeScript configuration.

https://github.com/angular/angular-cli/blob/main/CHANGELOG.md

而我的.browserslistrc看起来一个月都是一样的，从一开始就没有任何变化：

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR

因此，我怎样才能摆脱这个警告呢？

要理解这个警告，我们首先需要了解Angular构建的工作原理。

首先，TypeScript构建需要运行。在这一步，通过tsconfig.json中的设置，你的TypeScript代码被编译成JavaScript。如果你将target设置为ES6，在Angular 15之前，TypeScript构建会产生ES6代码。

之后，Angular使用Babel来使生成的JavaScript代码向后兼容旧的浏览器版本，请参阅docs。它通过browserslist配置来获取您希望支持的浏览器列表，并在必要时为缺少的功能添加polyfills。

在Angular支持IE11的时候，这个问题要复杂得多。有一次，Angular CLI甚至为IE11生成了一个额外的bundle，这被称为differential loading。但现在Angular放弃了对IE11的支持，他们可以再次简化事情，并向现代的bundle发展，这可能是他们在v15中变化的原因。

所以在我看来，没有充分的理由将你的tsconfig.json中的target设置为像ES6这样的旧版本。现在的浏览器支持更多的EcmaScript功能，使用最新的EcmaScript版本会使你的包的大小更小。Babel无论如何都会填补缺失的功能，所以你不必担心。只要按照他们的建议将目标设置为ES2022即可。

我也有同样的问题，并通过在我的tsconfig中加入"target": "ES2022"和"useDefineForClassFields": false成功地消除了这个警告。这是否是一个好主意，要等比我更有见识的人来评论。我担心，当2022变成2023（或接下来的什么）时，这将以你现在的方式失败。当然，如果Angular无论如何都要覆盖它的话，最好是能完全不使用它（就像我一样）。但我可能对这个问题掌握得不全面。

在你的案例中，你应该可以用ES6（我理解为与ES2015相同）来做（或至少是尝试）同样的事情。根据你引用的文档，无论你的要求如何，Angular都是这样做的，所以如果你只得到警告而没有错误，你的代码应该是没有问题的。如果你需要将事情进一步限制在ES6级别，似乎你需要用你的.broswerslistrc文件来做这件事，这可能也已经很好。

我认为这里的问题是，这个警告没有帮助，至少对像你和我这样的人来说，他们是收到了这个警告，却不知道该怎么做。还有它后面的网络链接（"要控制ECMA版本和功能，请使用Browerslist配置。更多信息，见https://angular.io/guide/build#configuring-browser-compatibility "）似乎对解决这个警告没有特别的帮助，告诉我们应该做什么，但没有告诉我们如何做才能摆脱这个警告。