Как я могу использовать декораторы сегодня?

Вы правы, декораторы ES2016 еще не являются частью спецификации. Но это не значит, что мы не можем использовать его сегодня.

Сначала давайте сделаем шаг назад и рассмотрим «что такое декоратор». Декораторы — это просто оболочки, добавляющие поведение объекту. Это не новая концепция в javascript (или в программировании в целом), на самом деле она существует уже некоторое время...

Вот базовый пример декоратора, который проверяет разрешения:

function AuthorizationDecorator(protectedFunction) {
    return function() {
        if (user.isTrusted()) {
            protectedFunction();
        } else {
            console.log('Hey! No cheating!');
        }
    }
}

Использование будет выглядеть так:

AuthorizationDecorator(save);

Вы видите, что все, что мы делаем, это просто завершаем какую-то другую функцию. Вы даже можете передать функцию через несколько декораторов, каждый из которых добавляет часть функциональности или запускает некоторый код.

Вы даже можете найти несколько старых статей, объясняющих шаблон декоратора в javascript.

Теперь, когда мы понимаем, что декораторы — это на самом деле то, что мы (сообщество javascript) всегда могли делать, вероятно, вас не шокирует тот факт, что на самом деле, когда мы используем декораторы ES2016 сегодня, они просто компилируются в код ES5, поэтому вы поддерживаете совместимость с браузером. Так что на данный момент это просто синтаксический сахар (я мог бы добавить немного действительно сладкого сахара).

Что касается того, какой компилятор использовать для преобразования кода ES2016 в код ES5, у вас есть несколько вариантов: Babel и Traceur являются наиболее популярными.

Ниже приведены дополнительные материалы по Изучение декораторов ES2016.

Поддержку декораторов @Class можно включить в Babel/Traceur

Вавилон:

$ babel --optional es7.decorators

Источник: Ознакомление с декораторами ES7 — Medium< /эм>

traceurOptions: {
  "annotations": true
}

exports class ExampleComponent {
  constructor(@Inject(Http) http: Http) {
    this.http = http;
  }
}

exports class ExampleComponent {
  constructor(http) {
    this.http = http;
  }

  static get parameters() {
    return [[Http]];
  }
}