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

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

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

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

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

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

function Template(template: string, id: string) {

}

@Template()

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

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

image2

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

image3

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

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

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 を設定します。

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

ブラウザで確認すると、

image5

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

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

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

constructorの型をany型にします。

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が入るように設定します。

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")の後に、『!』を追加します。

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

image7

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

ブラウザで確認すると、

image8

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

ブログ一覧