tsを書いている時、
特定の要素に対して処理を行おうとするとtyescriptに下記のエラーで怒られました。
html側
<button id="js_btn" type="button">ボタンです</button>
ts側
const btn = document.querySelector("#js_btn"); //ボタン要素を取得
const click = new window.MouseEvent('click');//クリックイベントを作成
//ボタンに対してクリックイベントを発火。これを書くことで、実際にjs_btnをクリックしなくても発火できる
btn.dispatchEvent(click);
こんな感じで記述すると、typescriptコンパイル時にエラーとなりました。
エラー内容
'btn' is possibly 'null'.
文字通り、btn要素が取れないケースもある。
tsを書いている時点では該当要素があるかどうかtsさんからではわからないので、
そのオブジェクトがnullかどうか、チェックを行うことを求めます。
で、下記のように調整すると正常にコンパイルできました。
btn?.dispatchEvent(click);
上記のオプショナルチェーンを利用することで、nullの場合はその先のdispatchEventは行わないぞ、ということになります。
参考
https://typescriptbook.jp/reference/values-types-variables/object/optional-chaining
追記：または、メソッド名の後ろに！をつけることで、これはnullではないとtsに伝えることも可能。
const btn = document.querySelector("#js_btn")!;