如何通过 Babel 在类实例上使用 JavaScript 装饰器？

Question

鉴于以下.babelrc 配置：

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", {
      "legacy": false,
      "decoratorsBeforeExport": false
    }]
  ]
}

我无法让类装饰器工作：

@annotation
class MyClass { }

function annotation(target) {
   target.annotated = true;
}

const c = new MyClass();
console.log(c);

另外，console.log(target) 产生以下结果：

Object [Descriptor] { kind: 'class', elements: [] }

对于console.log(c) 语句，我希望看到添加了带注释的属性，但我得到的只是MyClass {}。

一些额外的说明 - 我知道 legacy: true 标志，但我希望使用现在的规范，而不使用旧的后备。我做了一些额外的研究，我认为我在正确的道路上，这里是更新的代码：

@annotation
class MyClass { }

function annotation(descriptor) {
  const {
    kind,
    elements
  } = descriptor;

  const newElements = elements.concat([{
    kind: 'field',
    placement: 'own',
    descriptor: {
      annotated: true
    }
  }]);
  return {
    kind,
    elements: newElements
  }
}

const c = new MyClass();
console.log(c);

上述方法仍然不起作用，但至少我不再遇到奇怪的错误:)

如果有兴趣，请阅读已接受答案中的 cmets 以了解一些潜在的解决方案。

** 更新 ** 我实际上设法弄清楚了 - 使用 legacy: false 选项：

@annotation
class MyClass { }

function annotation(descriptor) {
  const {
    kind,
    elements
  } = descriptor;

  const newElements = elements.concat([{
    kind: 'field',
    placement: 'own',
    key: 'annotated',
    initializer: () => true,
    descriptor: {
      configurable: true,
      writable: true,
      enumerable: true
    }
  }]);
  return {
    kind,
    elements: newElements
  }
}

const c = new MyClass();
console.log(c); // MyClass { annotated: true }

Answer 1

返回一个在构造函数中设置属性的新类。

@annotation
class MyClass { }

function annotation(target) {
  return class extends target {
    constructor(...args) {
      super(...args);
      this.annotated = true;
    }
  }
}

const c = new MyClass();
console.log(c);