デコレータとは、クラスまたはメソッドを、別のコードでラップすることです。

TypeScript でデコレータを使用するには、tsconfig.json のcompilerOptions"experimentalDecorators": true"emitDecoratorMetadata": trueを追加する必要があります。

image2

例えば、Personクラスがあるとします。

class Person {
  name = "田中"

  constructor() {
    console.log("作成中です")
  }
}

let person = new Person()

console.log(person)

console.log()で確認すると、

image3

Personオブジェクトが作成され、personも出力されています。

デコレータを追加してみます。

今回は、『名簿を作成します』と表示され、constructorを実行する関数を作ります。

function Create(constructor: Function) {
  console.log("名簿を作成します")
  console.log(constructor)
}

constructorは関数なので、Function型になります。

デコレータとして追加するには、『@』の後に関数名を指定します。

function Create(constructor: Function) {
  console.log("名簿を作成します")
  console.log(constructor)
}

@Create
class Person {
  name = "田中"

  constructor() {
    console.log("作成中です")
  }
}

let person = new Person()

console.log(person)

console.log()で確認すると、

image4

Create関数も表示されました。

また、関数を return することで、デコレータで値を渡すことができます。

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

@Create("名簿を作成します")

image5

『名簿を作成します』を渡すことができました。

ブログ一覧