TypeScriptのエラー

TypeScript記述時に出たエラーと、対応のメモ

HTML要素を取得して操作する際に「nullの可能性があります」というエラーが出る

code:js

const parent_element = document.getElementById("js-works");

....

parent_element.insertAdjacentHTML("beforeend", html);

上記のようにgetElementById()などでHTMLを取得し、操作する場合に、「nullの可能性があります」というエラーが表示される。

要素が見つからなかった時に"null"を返すことがあり、その場合にエラーが発生してしまうことがあるために表示される

【対処法】

if文を使い、nullがなかった時はエラーメッセージを表示するなどしてプログラムの実行が中断されることを防ぐ

code:js

const parent_element = document.getElementById("js-works");

...

if(parent_element) {

parent_element.insertAdjacentHTML("beforeend", html);

} else {

console.log("#js-works というHTMLエレメントは見つかりませんでした。");

}

オプショナルチェーン (オプショナルチェイニング)?.を使用

code:js

parent_element?.insertAdjacentHTML("beforeend", html);

parent_element が null や undefined の場合、そのままスキップされ、エラーが発生しない

⇒null や undefined の場合に何も起こらないため、エラーが発生していることに気付かない可能性がある

Non-null assertion operator !を使用

code:js

const parent_element = document.getElementById("js-works")!;

開発者がparent_element が null でないことを保証している場合に使用する

null や undefined の場合はエラーが発生するため、バグの発見が容易

⇒本当に null または undefined であった場合、エラーが発生し、プログラムの実行が中断されてしまう