【TypeScript】デコレータを使ってブラウザに文章を表示する
TypeScript

【TypeScript】デコレータを使ってブラウザに文章を表示する

作成日:2021年08月23日
更新日:2021年08月23日

デコレータを使って、ブラウザに文章を表示してみます。

今回は、『田中』を表示するようにします。

HTML を作成する場所が必要なので、まずは index.html にdivでレンダリングする場所を作成します。

html
<div id="decorator"></div>

Template関数とデコレータを作成します。

第一引数にはtemplate、第二引数にはidを渡すようにします。

ts
function Template(template: string, id: string) {
}
@Template()

Template 関数の中で、getElementById と innerHTML を使って、div の中に表示できるようにします。

ts
return function (constructor: Function) {
const person = document.getElementById(id);
person.innerHTML = template;
};

image2

エラーが発生しているので確認すると、

image3

『オブジェクトは 'null' である可能性があります。』と指摘されました。

personが存在しているとき、innerHTMLが使えるようにするために、if 文で囲います。

ts
function Template(template: string, id: string) {
return function (constructor: Function) {
const person = document.getElementById(id);
if (person) {
person.innerHTML = template;
}
};
}

image4

エラーが消えました。

@Template()の中に、第一引数と第二引数を入力します。

第一引数には、表示したい HTML、第二引数には index.html で設定した id を設定します。

ts
@Template("<h1>ここに名前が入ります</h1>", "decorator")

ブラウザで確認すると、

image5

@Templateで指定した文章が入りました。

さらに、Personクラスで指定したnameを表示させてみます。

Template関数の中に、new constructor()を作成します。

constructorの型をany型にします。

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;
}
};
}

if文の中に、h1タグの中にnameが入るように設定します。

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;
}
};
}

image6

エラーが発生し、『オブジェクトは 'null' である可能性があります。』と指摘されました。

nullの場合は無いとわかっているので、person.querySelector("h1")の後に、『!』を追加します。

ts
person.querySelector("h1").textContent = newName.name;

image7

エラーが解除されました。

ブラウザで確認すると、

image8

Personクラスで指定したnameが表示されました。

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