'element' は 'null' の可能性があります。ts(18047) 〜TypeScriptで要素を取得する〜

エラー内容

TypeScriptで要素を取得したあと、プロパティにアクセスすると「'XXXX' は 'null' の可能性があります。」というエラーが出る。

コード：

index.html

<div class="js-class">新しいクラスを追加する</div>

index.ts

const element = document.querySelector(".js-class");
element.classList.add("is-sp");

anyやasを使ってただエラーを回避するのではなく、
想定される型と型注釈が一致するような記述を考えてみた。

結論：下記２点で対応する

①要素を取得する時に<HTMLElement>をつける。

index.html

<div class="js-class">新しいクラスを追加する</div>

index.ts

const element = document.querySelector<HTMLElement>(".js-class");

何も指定しないと変数elementはElement型で型推論されるため
ジェネリクスを使ってHTMLElement型を指定します。

②nullの可能性を考慮する

方法1.？（オプショナルチェイニング）をつける

index.ts

element?.classList.add("is-sp");

？（オプショナルチェイニング）をつければ、nullの場合は実行されません。
結果nullの場合も考慮されたコードになるのでtsのエラーも回避できます。

方法2. ifで存在チェックをする

式として代入する場合はオプショナルチェイニングが使えないため、ifを使う

index.ts

if (element) element.style.display = "none";

上記のようにifを使えばelementが存在する場合のみ処理を実行するようにできます。
（補足：条件文でnullはfalseになる）

やってはいけない対処

取得している要素がHTMLElementだからといって、下記のようにしてはいけません。。！

index.ts

const element = document.querySelector(".js-class")　as HTMLElement;

上記のように書くと変数elementがnullである可能性がなくなってしまいます。
（nullになるかもしれないのに！）

運用、改修をしていく中で

・HTMLのクラス名を後から消してしまったり、
・jsが実行されるタイミングで動的にクラス名が変わったり

などで要素が取得できないこと（nullになる）もあるかもしれません。

なのでnullの可能性を残したコードにするためにも、as(アサーション)は避けましょう。