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

Question

I have a simple TypeScript tsconfig.json :

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

And a class that uses a decorator:

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

The decorator causes myField to be emitted as a property that uses a __decorate function, the myDecorator function is passed to it.

After upgrading to the latest version (4.2.4) this stopped working in Visual Studio 2019, but it continues to work in VS Code (using 4.3.5) and continuous integration tools (in both 4.3.5 and older 3.* TypeScript releases).

After some investigation it appears that the emitted JavaScript has changed to include the fields explicitly, but only in the TypeScript 4.2.4 embedded in Visual Studio 2019. These explicit fields cause the __decorate to fail to create the new property with the same name.

Why has the emitted JS changed?

How do I fix it?

Answer 1

TL;DR : The fix for TypeScript property decorators breaking when you upgrade TypeScript is to add "useDefineForClassFields": false to your tsconfig.json .

This is due to a breaking change in TypeScript that was optional in 3.7, but appears to be the default in 4.2 (but not 4.3), and the way the embedded version of TypeScript in Visual Studio 2019 ignores settings.

Firstly we have a new flag: useDefineForClassFields - turning this on causes tsc to emit fields directly. This is expected to break decorators, but is apparently by design (even though it means useDefineForClassFields and experimentalDecorators now break each other).

As useDefineForClassFields is a breaking change it's supposed to default to false . However, to align with the ECMAScript standard it should default to true when target is ESNext or ES2020 .

It doesn't. It defaults to false except in Visual Studio, where it defaults to true , regardless of your tsconfig .