TypeScriptのデコレータ①

はじめに

• TypeScriptとES6にクラスが導入されたことにより、クラスやクラスメンバーの注釈や変更をサポートするために追加の機能を必要とする特定のシナリオが存在するようになりました。デコレーターは、クラス宣言とメンバーの注釈とメタプログラミング構文の両方を追加する方法を提供します。デコレータは、JavaScriptのステージ2の提案であり、TypeScriptの試験的な機能として利用できます。
• Classをデコレーションするのがデコレータ。デコレータはただの関数である
• 将来的にはJavaScriptに組み込まれる予定である

設定

tsconfig.jsonファイルの設定を下記のように行います

{
  "compilerOptions": {
    "target": "ES5",
    "experimentalDecorators": true
  }
}

classに関数をデコレータする

• デコレータはクラスの宣言時に実行される

• サンプルコード

function Logger(constructor: Function) {
  console.log('ログ出力')
}

@Logger
class User {
  name = 'Yamada'
  constructor() {
    console.log('User Class初期化')
  }

  method() {
    console.log('User Method実行')
  }
}

const user = new User()
user.method()

• 実行結果

ログ出力
User Class初期化
User Method実行

デコレータファクトリ

• デコレータを返す関数をデコレータファクトリという
• デコレータファクトリを利用するとデコレータに引数を渡すことができる

function Logger(message: string) {
  return function (constructor: Function) {
    console.log(message)
  }
}

@Logger('デコレータの引数')
class User {
  name = 'Yamada'
  constructor() {
    console.log('User Class初期化')
  }

  method() {
    console.log('User Method実行')
  }
}

const user = new User()