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

2023年8月18日JavaScript

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

サンプルコード

ここ最近は、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アサーション演算子

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

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

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

まとめ

今回は、TypeScriptコードの中に出てきた、変数の後についている「!」が見慣れなかったので、意味を調べてみました。
この手のものは知らないと調べるのが大変なので、同じように疑問に思っている方の参考になれば幸いです。

また、だいぶ前にTwitterでnull等にならないようにしているが型チェッカーが怒ってくるをどう回避するんだろうか、とつぶやいていましたが、これが答えかなと思います。

短いですが、今回はここまで。

おわり

Posted by しきゆら