Example​

(examples are from proposal)

Simple class decorator​

@annotation
class MyClass {}

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

Class decorator​

@isTestable(true)
class MyClass {}

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

Class function decorator​

class C {
  @enumerable(false)
  method() {}
}

function enumerable(value) {
  return function(target, key, descriptor) {
    descriptor.enumerable = value;
    return descriptor;
  };
}

Installation​

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

yarn add --dev @babel/plugin-proposal-decorators

pnpm add --save-dev @babel/plugin-proposal-decorators

Usage​

With a configuration file (Recommended)​

{
  "plugins": ["@babel/plugin-proposal-decorators"]
}

Via CLI​

babel --plugins @babel/plugin-proposal-decorators script.js

Via Node API​

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

Options​

version​

"2023-01", "2022-03", "2021-12", "2018-09" or "legacy".

Selects the decorators proposal to use:

• "2023-01" is the proposal version after the updates that reached consensus in the January 2023 TC39 meeting, integrating pzuraq/ecma262#4.
• "2022-03" is the proposal version that reached consensus for Stage 3 in the March 2022 TC39 meeting. You can read more about it at tc39/proposal-decorators@8ca65c046d.
• "2021-12" is the proposal version as it was presented to TC39 in Dec 2021. You can read more about it at tc39/proposal-decorators@d6c056fa06.
• "2018-09" is the proposal version that was initially promoted to Stage 2 presented to TC39 in Sept 2018. You can read more about it at tc39/proposal-decorators@7fa580b40f.
• legacy is the original Stage 1 proposal, defined at wycats/javascript-decorators@e1bf8d41bf.

⚠️ If you specify the decoratorsBeforeExport option, version defaults to "2018-09".

decoratorsBeforeExport​

This option:

• is disallowed when using version: "legacy", version: "2022-03", or version: "2023-01";
• is required when using version: "2018-09";
• is optional and defaults to false when using version: "2021-12".

boolean

// decoratorsBeforeExport: false
export @decorator class Bar {}

// decoratorsBeforeExport: true
@decorator
export class Foo {}

This option was originally added to help tc39 collect feedback from the community by allowing experimentation with the proposed syntaxes. The proposal has now settled on allowing decorators either before or after export.

legacy​

⚠️ DEPRECATED: Use version: "legacy" instead. This option is a legacy alias.

boolean, defaults to false.

Use the legacy (stage 1) decorators syntax and behavior.

NOTE: Compatibility with @babel/plugin-proposal-class-properties​

If you are including your plugins manually and using @babel/plugin-proposal-class-properties and legacy decorators, make sure that @babel/plugin-proposal-decorators comes before @babel/plugin-proposal-class-properties.

Wrong:

{
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    ["@babel/plugin-proposal-decorators", { "version": "legacy" }]
  ]
}

Right:

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "version": "legacy" }],
    "@babel/plugin-proposal-class-properties"
  ]
}

You can read more about configuring plugin options here

References​

• Proposal: JavaScript Decorators