TypeScript

【TypeScript】デコレータが実行される順番

作成日：2021年08月24日

更新日：2021年08月24日

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

ts
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);

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

ts
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);