【TypeScript】変数の後ろにつく「!」は何か

2023年8月18日2023年9月12日JavaScript

こんにちは、しきゆらです。
今回は、タイトルの通りTypeScriptのコードに時々出てくる「!」が見慣れなかったので調べた結果をメモしておきます。

1. サンプルコード
2. 非nullアサーション演算子
3. まとめ

サンプルコード

ここ最近は、Tauriと戯れているので、自ずとTypeScriptのコードを読むことが多くなっています。
そんな中で、以下のようなコードが出てきました。

const root = document.getElementById('root');

if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
  throw new Error("error");
}

render(() => <TodoList />, root!); // <= これは何を表しているか

内容としては、HTML要素を取得して、問題なく取得できればTodoListという要素をレンダリングする、というようなコードになっています。

この中で、コメント入れていますがrender関数の第2引数に入っているrootに謎の!が付いています。
これは何ぞや、ということで調べてみました。

非nullアサーション演算子

Unknown Title

Unknown ...

https://typescript-jp.gitbook.io/deep-dive/intro/strictnullc...

この「!」は「非nullアサーション演算子(Non-Null Assertion Operator)」というとのこと。
簡単に言えば、この値・変数はnull/undefinedじゃないぞ、ということを表現するための演算子である、ということ。

上記のサンプルコードを見ると、変数rootはgetElementByIdでHTML要素を取得していますが
HTML要素が見つからなければnullが返ってきます。
TypeScriptさんは、render関数にnullが入るとエラーになるぞ、と注意してくれますが、そもそもその前のif文ではじいています。

そこで、型チェッカーがnullにならないと結論付けできない場合に、nullにならないぞと宣言するための演算子でした。