Angular2とDecorators

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の設定が必要がある。)

という感じのメモ(書いてみたら大して書くこと思いつかなかった)。

そのほか参考: