web-dev-qa-db-ja.com

今日、デコレータをどのように使用できますか？

今日、いくつかのjavascriptコードでデコレータがすでに使用されているのがわかります。私の質問は本当に2つあります。

最初：

デコレータがまだ完成していない場合、今日、どのようにしてデコレータを本番コードで使用できるのでしょうか。ブラウザのサポートは存在しませんか？

2番目：

いくつかのオープンソースプロジェクトが示唆するように、今日それを使用することが可能であるとすると、デコレータを機能させるために一般的に推奨されるセットアップは何ですか？

javascriptecmascript-nextangularjs-decoratorjavascript-decorators
19
Jacob Baris

そうです、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デコレータの探索 についてさらに読んでください。

18
Kirill Fuchs

@ClassデコレータのサポートはBabel/Traceurで有効にできます

Babel：

$ babel --optional es7.decorators

出典： ES7デコレータの拡張-中

トレーサー：

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]];
  }
}

出典： https://stackoverflow.com/a/34546344/29034

更新：

Babelがデコレータの設定方法を変更したようで、記事は古くなっています。 ここにリンクがあります 新しいアプローチへ。

要するに; はいES6/7では@Classデコレータを使用できます。 noプロパティデコレータはES6/7ではサポートされていないため、回避策を使用する必要があります。

5
Evan Plaice

デコレータを使用するためのいくつかの解決策があります。

  • babel -デコレータをサポートするes5コンパイラの隣のes。
  • traceur --googleによるes5コンパイラの隣にある別のes。
  • TypeScript -デコレータをサポートするjavascript言語の型付きスーパーセット。

これらのツールが「最新の」JavaScriptを古いものにトランスパイルする方法にはいくつかの違いがあり、オンラインの遊び場があるため、必要に応じてそれを探索できます。

5
shadeglare