TL;DR
式の後ろに ! を付けて、値が null でも undefined でもないと TypeScript に伝える構文。型から null と undefined を取り除く、型アサーションの一種である。
仕組み
TypeScript の公式ハンドブックによると、式の後ろに ! を書くと、明示的なチェックをせずに型から null と undefined を取り除ける。他の型アサーションと同じく、実行時のコードの挙動は変わらない。
function liveDangerously(x?: number | null) {
// エラーにならない
console.log(x!.toFixed())
}Effective TypeScript 項目8 によると、! は値空間では論理 NOT 演算子、型の文脈では非 null アサーションになる。
例
document.getElementById は HTMLElement | null を返すので、! を付けると HTMLElement になる。
const el = document.getElementById("foo")! // HTMLElement注意点
実行時には何もチェックしないので、値が null や undefined になりえないと分かっているときだけ使う。Effective TypeScript 項目9 では、TypeScript が知らない型の情報をプログラマが知っているときだけ使い、なぜ必要かをコメントに書くよう勧めている。多くの場合は、オプショナルチェーン(?.)を使うとよい。
document.getElementById("foo")?.addEventListener("click", () => alert("Hi there!"))