我应该如何在Angular中使用ES2020？

Question

这是我的 tsconfig.json 文件：

    {
      "compileOnSave": false,
      "compilerOptions": {
        "baseUrl": "./",
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "module": "es2015",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "importHelpers": true,
        "target": "es6",
        "typeRoots": [
          "node_modules/@types"
        ],
        "lib": [
          "es2018",
          "dom"
        ]
      }
    }

当我将库和目标版本从es2018更改为es2020时，会出现以下错误：

tsconfig.json（13,15）：错误TS6046：'--target'选项的参数必须是：'es3'、'es5'、'es6'、'es2015'、'es2016'、'es2017'、'es2018'、'esnext'。

- Swanand Taware

---

我的回答解决了你的问题吗？ - JSON Derulo

是的。感谢您的帮助。 - Swanand Taware

提醒：iOS设备上的Safari浏览器与操作系统版本相关联。因此，任何未升级到iOS 13.4或更高版本的用户将无法使用ES2020功能。虽然这只占我的用户不到1％，但不幸的是它并非为零。 - Simon_Weaver

Answer 1

es2020支持是在TypeScript 3.8中引入的。

你必须升级到Angular 9.1（或更高版本）才能使用TypeScript 3.8。

- JSON Derulo

Answer 2

我使用的是 Angular 的 11.2.14 版本，但仍无法在 tsconfig.json 中添加 "target": "ES2020"。我的构建失败了：

Error: ./src/app/shared/validators/form.validators.ts 10:21 Module parse failed: Unexpected token (10:21) File was processed with these loaders:

• ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js
• ./node_modules/@ngtools/webpack/src/index.js

您可能需要一个额外的加载器来处理这些加载器的结果。 ...

根据这个 GitHub 问题，错误与 WebPack（我的版本为 4.44.2）有关。支持 ES2020 将随着 WebPack 5 的推出而到来。

- mimo

Answer 3

我认为在 Angular 9 之前，es2020 并未作为目标添加。所以如果你使用的版本低于此，我可以理解为什么它不起作用。 esnext 目标最新支持的功能，因此应该非常类似。

- Jesse