ES7から導入?されるDecorator(Javaでいうアノテーション的なやつ?)を使ってみた

導入

至って簡単でbabel-plugin-transform-decoratorsを.babelrcのpluginsに定義するだけ(もちろんパッケージのインストールは必要)

ただし、これES7からの機能であると思われる物だと思うので記事投稿時の時点でのbabelでは使用できないらしいのでbabel-plugin-transform-decorators-legacyを使う

{
  "plugins": ["transform-decorators-legacy"]
}

src/sample_decorator.js

export default function sample_decorator() {
  return function decorator(target) {
    target.prototype.sample = () => {
      console.log("say!");
    };
  }
};

このdecoratorが付与されたクラスにsampleっていうメソッドをぶちこむだけの

src/index.js

import sample_decorator from "./sample_decorator.js";

@sample_decorator()
export class Index {
  run() {
    this.sample();
  }
}

new Index().run();

終わり。ビルドして実行してみるとIndexクラスにdecoratorで付与したメソッドが実行出来るようになってるはず

余談

全力で ES Decorator使ってみたから引用すると

クラスデコレータは Class Functionをとって Class Function を返す関数

クラスの関数デコレータは instance とname と descriptor を引数に descriptorを返す関数

引数を取るデコレータは、関数を返す関数として実装する(部分適用っぽい感じ)

クラスに所属しない関数へのデコレータはbabel/typescriptともに未実装？

だとのこと