DOMと型
画面まわりにも型がある
データと関数が終わったので、最後は画面を触るコードです。ブラウザの部品にも TypeScript の型が用意されています。
これまでの JavaScript ではこう書いていました。
JavaScript
const input = document.getElementById("title");
const title = input.value;そのまま .ts にすると、いきなり 2 件エラーが出ます。
見つからないかもしれない
1 件目はこれです。
プレーンテキスト
'input' is possibly 'null'.getElementById が返すのは HTMLElement | null です。その id の部品がページに無ければ null が返るので、TypeScript は「無い場合を考えていませんね」と止めます。
TypeScript
const input = document.getElementById("title");
if (input === null) {
return;
}第5章でやった型ガードが、そのまま出てきています。
部品の種類までは分からない
2 件目はこれです。
プレーンテキスト
Property 'value' does not exist on type 'HTMLElement'.value を持っているのは入力欄の型である HTMLInputElement で、すべての部品が持つわけではありません。見出しの部品には value はありません。だから HTMLElement のままでは読めません。
種類が分かっているときは、こちらから教えます。
TypeScript
const input = document.querySelector<HTMLInputElement>("#title");
if (input === null) {
return;
}
const title = input.value;querySelector は山カッコで型を渡せます。第6章で見たジェネリクスの形です。getElementById の場合は as HTMLInputElement と書いて型を上書きします。
ただし as は「私が保証します」という宣言で、検査ではありません。間違えても TypeScript は止めてくれないので、種類が確実に分かっているところだけで使います。
入力欄の値はいつも文字列
もう 1 つ、型が教えてくれる大事な事実があります。入力欄の value は、数値入力の欄であっても string です。
TypeScript
const count = countInput.value;
// count は string。12 ではなく "12"これを数えるつもりで足すと、"12" + 1 で "121" になります。JavaScript のころは動いてから気付いていた事故で、型を付けると入口で気付けます。
つまり画面から来た値は、まず文字列として受け取り、自分で数値へ直し、直せたかどうかを確かめる、という手順が要ります。
手を動かす
演習では、入力欄から取り出したあとの部分を書きます。フォームから来た 2 つの文字列を受け取り、中身を確かめて登録用の一行を作ってください。value がいつも文字列であることが、そのまま課題になっています。
要件
titleとcountTextに型注釈を付ける- タイトルが空のときは
タイトルを入力してくださいを返す - 作品数が空、または数値に直せないときは
作品数は数字で入力してくださいを返す - 検査の順番はタイトルが先
- どちらも通ったら
「タイトル」をN件として登録しますを返す
入出力例
parseWorkForm("プロフィールサイト", "3") → "「プロフィールサイト」を3件として登録します"
parseWorkForm(" 自己紹介カード ", " 1 ") → "「自己紹介カード」を1件として登録します"
parseWorkForm(" ", "3") → "タイトルを入力してください"
parseWorkForm("スキル一覧の表", "さんけん") → "作品数は数字で入力してください"
parseWorkForm("スキル一覧の表", "") → "作品数は数字で入力してください"
parseWorkForm("", "") → "タイトルを入力してください"ヒント
