【TypeScript】デコレータが実行される順番
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);

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

image2

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

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

© 2024あずきぱんウェブスタジオ