Decorators

Baseline

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

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

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.