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

Я вижу, что декораторы используются сегодня уже в некотором javascript-коде. Мой вопрос действительно в два раза.

Во-первых:

Если декораторы даже не были доработаны, как можно использовать их в производственном коде, сегодня? Не будет ли поддержка браузера несуществующей?

Во-вторых:

Учитывая, что сегодня можно использовать его, поскольку некоторые проекты с открытым исходным кодом предполагают, что типично рекомендуется для установки декораторов?

Ответ 1

Вы правы, декораторы 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.

Ответ 2

Есть несколько вариантов использования декораторов:

babel - рядом с es5-компилятором с поддержкой декораторов.
traceur - еще один es рядом с es5 компилятором google.
typescript - типизированный надмножество языка javascript, поддерживающий декораторов.

Существует некоторая разница в том, как эти инструменты переводят "современный" javascript в более старый, чтобы вы могли исследовать его, если это необходимо, поскольку у них есть онлайн-площадки.

Ответ 3

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

Бабель:

$ babel --optional es7.decorators

Источник: Exporing ES7 Decorators - Medium

Traceur:

traceurOptions: {
  "annotations": true
}

@Property декораторы не поддерживаются

... и поскольку каждый @Property обеспечивает уникальную функциональность, для каждого из них требуется другой подход к десурагированию в ES6/7.

Здесь вы используете @Inject:

Typescript

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

ES 6/7

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

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

Источник: fooobar.com/info/313494/...

Update:

Похоже, что Вавилон изменил способ настройки декораторов, и статья устарела. Здесь ссылка на новый подход.

Короче говоря; да, вы можете использовать декораторы @Class в ES6/7; никакие декораторы свойств не поддерживаются в ES6/7, поэтому вам придется использовать обходные пути.