更新后出现 Typescript 警告：TypeScript 编译器选项“target”和“useDefineForClassFields”设置为“ES2022”

Question

我正在使用以下命令升级我的前端库。

ncu -u

npm install --legacy-peer-deps

以下内容已更新，我认为相关。

typescript 4.8.4   -> 5.0.4

Angular    14      -> 16

Node       16.13.2 -> 18.16.0

npm        8.x.x   -> 9.6.6

NgRx       14      -> 16 (probably not relevant)

RxJs       7.5.x   -> 7.8.x (probably not relevant)

启动后我收到以下警告，

TypeScript 编译器选项“target”和“useDefineForClassFields”分别由 Angular CLI 设置为“ES2022”和“false”。要控制 ECMA 版本和功能，请使用 Browerslist 配置。有关更多信息，请参阅 https://angular.io/guide build#configuring-browser-compatibility 注意：您可以在项目的 tsconfig 中将“target”设置为“ES2022”来删除此警告。

虽然这只是一个警告，但我们希望以有意义的方式解决此警告。现在我们正在运行 ES2015 的目标，将其设置为 ES2022 对我们来说并不是一个真正的选择。这样做会产生错误，导致我们无法加载应用程序。这几乎肯定会在我们的整个前端堆栈中持续存在。

下面是我们的tsconfig.json

我对此进行了大量的挖掘，所以我非常欢迎建议、指导和解释。谢谢！

tsconfig.json

{
    "compileOnSave": true,
    "angularCompilerOptions": {
        "fullTemplateTypeCheck": true,
        "preserveWhitespaces": true,
        "strictInjectionParameters": true,
        "disableTypeScriptVersionCheck": true,
        "enableIvy": true
    },
    "compilerOptions": {
        "baseUrl": "src",
        "declaration": false,
        "downlevelIteration": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "importHelpers": true,
        "mapRoot": "./",
        "outDir": "./dist",
        "sourceMap": true,
        "removeComments": false,
        "noImplicitAny": false,
        "moduleResolution": "node",
        "module": "ESNext",
        "target": "ES2015",
        "lib": [
            "dom"
        ],
        "paths": {
            "ctm-common": [
                "app/+common"
            ],
            "ctm-shared": [
                "app/+shared"
            ],
            "ctm-store": [
                "app/+store"
            ],
            "ctm-store/*": [
                "app/+store/*"
            ]
        },
        "types": [
            "jasmine",
            "node",
            "gsap"
        ],
        "typeRoots": [
            "./node_modules/@types",
            "./node_modules/rxjs/symbol",
            "./node_modules/angular-split"
        ]
    },
    "files": [
        "src/app/app.module.ts",
        "src/app/admin/admin.module.ts",
        "src/app/portal/portal.module.ts",
        "src/app/portfolios/portfolios.module.ts",
        "src/app/navigate/navigate.module.ts",
        "src/app/visuals/visuals.module.ts",
        "src/app/users/user-report.module.ts",
        "src/app/promoter/promoter.module.ts",
        "src/app/diagnostics/diagnostic.module.ts",
        "src/main.ts",
        "src/polyfills.ts"
    ],
    "include": [
        "./node_modules/angular-split/angular-split.d.ts",
        "./node_modules/ngx-clipboard/*/**.ts",
        "./node_modules/gsap/*"
    ],
    "exclude": [
        "test.ts",
        "**/*.spec.ts"
    ]
}

Answer 1

将目标设置为 ES2022 并将 useDefineForClassFields 设置为 false 可修复该问题。请参阅下面我的 tsconfig.json。

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    //"outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "noImplicitAny": false,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "es2020",
    "lib": [
      "es2020",
      "dom"
    ],
    "useDefineForClassFields": false
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}