TypeScriptでdiv要素を取得しよう

TypeScriptでdocument.querySelectorAll()でdivを取得して代入する書き方は火のようになる。

exe.ts

const divs = document.querySelectorAll<HTMLDivElement>('div');

補足説明：

・querySelectorAllは返り値としてNodeListを返す（配列っぽいけど配列じゃない）。
・と書くことで、取得する要素の型を明示できる（typeScriptの利点）
・divsの型はNodeListOfになる

もし特定のdivクラスだけ取得したい場合は以下のようにセレクタを変える

exe.ts

const specialDivs = document.querySelectorAll<HTMLDivElement>('div.special');

＜HTMLDivElement＞と定義する理由

document.querySelectorAll('div')だけだと、TypeScriptは具体的にどのタグかを判断できず、汎用的なElement型として扱う
しかし、実際にやりたいことはTypeScriptが＜div＞と判断しHTMLDivElementのプロパティを使用できる状態になること。

例：型を指定しない場合

exe.ts

const divs = document.querySelectorAll('div');

divs.forEach(div => {
    div.style.backgroundColor = 'blue'; //エラーになる可能性がある
});

例：型を指定する場合

exe.ts

const divs = document.querySelectorAll<HTMLDivElement>('div');

divs.forEach(div => {
    div.style.backgroundColor = 'blue'; //問題なし
});

この場合だとTypeScriptはHTMLDivElementと判断し.styleや.innerHTMLの使用を許可することができる