Decorators は ECMAScript で Propose となっている実装で、Angular 2 と TypeScript を使った実装ではよく出てくる。 Exploring ES2016 Decorators — Google Developers — Mediumを参考にすると、定義した function 名の頭に「@」をつけて、使いたい class や property の前に記述するらしい。
An ES2016 decorator is an expression which returns function and can take a target, name and property descriptor as arguments. You apply it by prefixing the decorator with an
@
character and placing this at the very top of what you are trying to decorate. Decorators can be defined for either a class or property.
Exploring ES2016 Decorators — Google Developers — Mediumに記述されているサンプルコード(一部)は下記のような感じ。
function readonly(target, key, descriptor) {
descriptor.writable = false;
return descriptor;
}
class Cat {
@readonly
meow() {
return `${this.name} says Meow`;
}
}
上記の例の場合、meow function オブジェクトの writable プロパティが false に設定される。
Angular.io の5 Min Quickstartでは、下記のようなサンプルコードが載っている。@Component の Decorators で設定したプロパティが、AppComponent に設定される。
import { Component } from "angular2/core";
@Component({
selector: "my-app",
template: "My First Angular 2 App",
})
export class AppComponent {}
(なお、TypeScript を Javascript に compile する場合には、tsconfig の compilerOptions で”experimentalDecorators”: true の設定が必要がある。)
という感じのメモ(書いてみたら大して書くこと思いつかなかった)。
そのほか参考: