【TypeScript】変数の後ろにつく「!」は何か
こんにちは、しきゆらです。
今回は、タイトルの通り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等にならないようにしているが型チェッカーが怒ってくるをどう回避するんだろうか、とつぶやいていましたが、これが答えかなと思います。
プロを目指す人のためのTypeScript入門 安全なコードの書き方から高度な型の使い方まで Software Design plus
短いですが、今回はここまで。
おわり
ディスカッション
コメント一覧
まだ、コメントがありません