`this` is incorrect for static fields and static accessors within decorators

[evanw]

🔎 Search Terms

javascript ecmascript standard decorator this static field accessor

🕗 Version & Regression Information

• This is an error in every version I tried (from 5.0 upward)

⏯ Playground Link

https://www.typescriptlang.org/play?ts=5.2.2#code/MYewdgzgLgBAJgU2ALhgMQK5mFAluGAXhgAoBKIgPhgG8YBfAKFElhwA8jb4kHHGAZlhz4wMAO4AnAIYAHWQkkkoAC1wRUUAJ4KQAmBwo1GMGAAFlaiADpEwCsAA20iBHQgQtE6fOX1tpAoAWwRVEDhybiYfX1V-OwpoaTxgGBCwiKM+b1MLOJsEmAFcBEc4VCxEYrAEOBzYqwD7GCSUopKyirAq3Bq6+rzGwoBzUJhRqChFci6evu5JUIxJMWifQfjAlqhk3FSJ8dCppTJZhGrahaWV7JiNgq2IMafJ6fYzi7gstdy-B+bWnsWs8jm8Pr1at9+Hc-k0KNJgMAEK4QJIYAikSjJOC+gNYYVAakMciIKj0YiSaicbVvEwmIwpHIFJJrMBpI5HCRDMxwKTHAhrI4QMMSAByCAYCmuUVkRhAA

💻 Code

The following code incorrectly crashes when it's transformed by TypeScript and then run:

const dec: Function = () => { }
const ctx = { dec }

function wrapper(this: typeof ctx) {
  @(this.dec) class Foo {
    @(this.dec) method() { }
    @(this.dec) static method() { }

    @(this.dec) field: undefined
    @(this.dec) static field: undefined

    @(this.dec) get getter(): undefined { return }
    @(this.dec) static get getter(): undefined { return }

    @(this.dec) set setter(x: undefined) { }
    @(this.dec) static set setter(x: undefined) { }

    @(this.dec) accessor accessor: undefined
    @(this.dec) static accessor accessor: undefined
  }
}

wrapper.call(ctx)
console.log('success')

🙁 Actual behavior

The value of this in decorators of static fields and static accessors is inconsistent with the value of this in all other kinds of decorators (run this code vs. this code).

🙂 Expected behavior

I expected the value of this to be the same for all kinds of decorators. The value of this is consistent when this code is compiled with Babel.

Additional information about the issue

For context, I'm starting to look at implementing JavaScript decorators in esbuild. I know this feature hasn't been standardized yet and is still being iterated on, but many of my users are asking for esbuild to implement it. My first step was to write a lot of tests: https://github.com/evanw/decorator-tests. That led to me discovering this bug in TypeScript.

Other bugs I noticed:

• TypeScript thinks the @ in () => @dec class {} is a syntax error (demo here). My reading of the specification is that this should be valid as PrimaryExpression contains ClassExpression which starts with DecoratorList opt. Babel accepts this code.

• TypeScript generates code containing syntax errors if await is used in a decorator. This is allowed by the specification as far as I can tell. Here is an example: (link). Babel prints true for this code while TypeScript emits invalid code. One simple hack to fix this could be for TypeScript to use await (async () => { await ... })() instead of (() => { await ... })() in this case.

• Referencing the class name within a decorator seems to return undefined instead of throwing a ReferenceError. Both TypeScript and Babel do this so I'm not sure if this is a bug with both, or if it's not a bug and the specification is outdated, or if I'm misreading the specification. Assuming this is a bug with both, it may be somewhat important to fix as people will surely try to do that (e.g. like this) and a ReferenceError seems more clear than a value of undefined.