Decorators

Type	TC39	MDN	CoreJS	Babel	Civet	JS+
Syntax	✅ Stage 3 View	❌	✅ View	✅ View	❌	✅ via Babel

Decorate classes, classes methods and their fields with additional functionality.

JS+ TypeScript

class C {
  message = "hello!";

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

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

// TypeScript supports decorators behind an experimental flag
// JavaScript doesn't support decorators yet

JS+ TypeScript

@defineElement("my-class")
class C extends HTMLElement {
  @reactive accessor clicked = false;
}

Decorators are special function calls that will pass as argument information about the class, method or field they decorate allowing for reusable and minimal contextual code.

Integration

This syntax is integrated with Babel’s plugin-proposal-decorators plugin.

---

Resources

• TC39 metadata decorator proposal