DOMと型｜コードで実践 - ゆめさくコード

画面まわりにも型がある

データと関数が終わったので、最後は画面を触るコードです。ブラウザの部品にも TypeScript の型が用意されています。

これまでの JavaScript ではこう書いていました。

const input = document.getElementById("title");
const title = input.value;

そのまま .ts にすると、いきなり 2 件エラーが出ます。

1 件目はこれです。

'input' is possibly 'null'.

getElementById が返すのは HTMLElement | null です。その id の部品がページに無ければ null が返るので、TypeScript は「無い場合を考えていませんね」と止めます。

const input = document.getElementById("title");
if (input === null) {
  return;
}

第5章でやった型ガードが、そのまま出てきています。

2 件目はこれです。

Property 'value' does not exist on type 'HTMLElement'.

value を持っているのは入力欄の型である HTMLInputElement で、すべての部品が持つわけではありません。見出しの部品には value はありません。だから HTMLElement のままでは読めません。

種類が分かっているときは、こちらから教えます。

const input = document.querySelector<HTMLInputElement>("#title");
if (input === null) {
  return;
}
const title = input.value;

querySelector は山カッコで型を渡せます。第6章で見たジェネリクスの形です。getElementById の場合は as HTMLInputElement と書いて型を上書きします。

ただし as は「私が保証します」という宣言で、検査ではありません。間違えても TypeScript は止めてくれないので、種類が確実に分かっているところだけで使います。

もう 1 つ、型が教えてくれる大事な事実があります。入力欄の value は、数値入力の欄であっても string です。

const count = countInput.value;
// count は string。12 ではなく "12"

これを数えるつもりで足すと、"12" + 1 で "121" になります。JavaScript のころは動いてから気付いていた事故で、型を付けると入口で気付けます。

つまり画面から来た値は、まず文字列として受け取り、自分で数値へ直し、直せたかどうかを確かめる、という手順が要ります。

演習では、入力欄から取り出したあとの部分を書きます。フォームから来た 2 つの文字列を受け取り、中身を確かめて登録用の一行を作ってください。value がいつも文字列であることが、そのまま課題になっています。