次の Person クラスとデコレータがあったとします。

function Template(template: string, id: string) {
  return function (constructor: any) {
    const person = document.getElementById(id)
    const newName = new constructor()
    if (person) {
      person.innerHTML = template
      person.querySelector("h1")!.textContent = newName.name
    }
  }
}

@Template("<h1>ここに名前が入ります</h1>", "decorator")
class Person {
  name = "田中"

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

let person = new Person()

console.log(person)

こちらに、新しいデコレータを追加してみます。

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

function Template(template: string, id: string) {
  return function (constructor: any) {
    const person = document.getElementById(id)
    const newName = new constructor()
    if (person) {
      person.innerHTML = template
      person.querySelector("h1")!.textContent = newName.name
    }
  }
}

@Create("名簿を作成します")
@Template("<h1>ここに名前が入ります</h1>", "decorator")
class Person {
  name = "田中"

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

let person = new Person()

console.log(person)

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

image2

@Template より@Create の方が上に設置していますが、まず@Template が実行され、次に@Create が実行されています。

つまり、デコレータの実行順番は、下からになります。

ブログ一覧