Skip to content

Property decorators not emitted for declared properties in TypeScript #1675

@pkaminski

Description

@pkaminski

It looks as if esbuild is ignoring decorators on properties that are just declared, whereas tsc invokes them correctly.

tsconfig.json:

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "sourceMap": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
  }
}

test.ts:

let decoratorsWork = false;
function decorator(klass, name) {
  decoratorsWork = true;
}
class Foo {
  @decorator declare field: number;
}
console.log({decoratorsWork});

This strips the decorator completely:

$ esbuild test.ts
let decoratorsWork = false;
function decorator(klass, name) {
  decoratorsWork = true;
}
class Foo {
}
console.log({ decoratorsWork });

Compare to the output from tsc:

$ tsc test.ts; cat test.js
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var decoratorsWork = false;
function decorator(klass, name) {
    decoratorsWork = true;
}
var Foo = /** @class */ (function () {
    function Foo() {
    }
    __decorate([
        decorator
    ], Foo.prototype, "field");
    return Foo;
}());
console.log({ decoratorsWork: decoratorsWork });

If I remove the declare it works, but obviously includes the property in the class definition, which is not desired in my case:

$ esbuild test.ts  # with declare removed
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator2; i >= 0; i--)
    if (decorator2 = decorators[i])
      result = (kind ? decorator2(target, key, result) : decorator2(result)) || result;
  if (kind && result)
    __defProp(target, key, result);
  return result;
};
let decoratorsWork = false;
function decorator(klass, name) {
  decoratorsWork = true;
}
class Foo {
  field;
}
__decorateClass([
  decorator
], Foo.prototype, "field", 2);
console.log({ decoratorsWork });

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions