Skip to main content

@babel/plugin-proposal-decorators

Example​

Simple class decorator​

JavaScript
@annotation
class MyClass {}

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

Class decorator​

JavaScript
@isTestable(true)
class MyClass {}

function isTestable(value) {
  return function decorator(target) {
    target.isTestable = value;
  };
}

Class method decorator​

JavaScript
class C {
  message = "hello!";

  @bound
  m() {
    console.log(this.message);
  }
}

function bound(value, { name, addInitializer }) {
  addInitializer(function () {
    this[name] = this[name].bind(this);
  });
}

Installation​

npm install --save-dev @babel/plugin-proposal-decorators

Usage​

babel.config.json
{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "version": "2023-05" }]
  ]
}

Via Node API​

JavaScript
require("@babel/core").transformSync("code", {
  plugins: [
    ["@babel/plugin-proposal-decorators", { version: "2023-05" }],
  ]
});

Options​

History
VersionChanges
v7.22.0Added support for version: "2023-05"
v7.21.0Added support for version: "2023-01"
v7.19.0Added support for version: "2022-03"
v7.17.0Added the version option with support for "2021-12", "2018-09" and "legacy"

version​

"2023-05" or "legacy".

Selects the decorators proposal to use:

  • "2023-05" is the proposal version after the updates that reached consensus in the March and May 2023 TC39 meetings. This version will be enabled by default if it ends up being the final one.
  • legacy is the legacy Stage 1 proposal, defined at wycats/javascript-decorators@e1bf8d41bf. The legacy mode will not have feature updates, and there are known discrepancies between Babel and TypeScript. It is recommended to migrate to the "2023-05" proposal version.

References​