为什么 typescript 属性装饰器在升级后停止工作？

Question

我有一个简单的 TypeScript tsconfig.json:

{
  "compilerOptions": {
    "target": "esnext",
    "experimentalDecorators": true,
    ...

还有一个使用装饰器的类：

class MyClass {
    @myDecorator()
    myField: any;
}

装饰器导致myField作为使用__decorate函数的属性发出，myDecorator函数被传递给它。

升级到最新版本 (4.2.4) 后，它在 Visual Studio 2019 中停止工作，但它继续在 VS Code（使用 4.3.5）和持续集成工具（在 4.3.5 和更早版本 3. * TypeScript 版本）。

经过一番调查，发出的 JavaScript 似乎已更改为显式包含字段，但 仅 在 Visual Studio 2019 中嵌入的 TypeScript 4.2.4 中。这些显式字段导致 __decorate无法创建具有相同名称的新属性。

为什么发出的 JS 变了？

我该如何解决？

Answer 1

TL;DR：当您升级 TypeScript 时，TypeScript 属性装饰器损坏的修复方法是将 "useDefineForClassFields": false 添加到您的 tsconfig.json。

这是由于 TypeScript 在 3.7 中是可选的，但似乎是 4.2（但不是 4.3）中的默认值，以及 Visual Studio 2019 中嵌入的 TypeScript 版本忽略设置的方式。

首先我们有一个新标志：useDefineForClassFields - 打开它会导致tsc 直接发出字段。这预计会破坏装饰器，但apparently by design （即使这意味着useDefineForClassFields 和experimentalDecorators 现在会互相破坏）。

由于useDefineForClassFields 是一项重大更改，它应该默认为false。但是，为了与 ECMAScript 标准保持一致，请使用 should default to true when target is ESNext or ES2020。

它没有。它在 Visual Studio 中默认为 false except，在此默认为 true，无论您的 tsconfig 是什么。