答え。

Non-Null Assertion Operator（!）は、TypeScriptの特別な構文で、コンパイラに「この時点で変数はnullまたはundefinedではないことを知っています」と明示的に伝えることができます。この演算子は、プログラマが値の存在に確信を持っているが、TypeScriptがその保証をできない場合の型の問題を解決するために追加されました。

問題の歴史

TypeScriptは、特にstrictNullChecksオプションが有効な場合、変数がnullまたはundefinedである可能性に厳しく対応しています。プログラマが値の安全性に確信を持っている状況でコンパイラの警告を回避するために、non-null assertionが導入されました。

問題

TypeScriptは、すべてのコードの分岐を追跡し、条件がnullである必要がないことを理解するとは限りません。これは、非同期コード、コールバック、DOM要素の処理などでよく発生します。

解決策

Non-Null Assertion Operator（!）は、コンパイラにこの場所でnull/undefinedが存在しないことを伝え、型エラーを排除します。

コードの例:

function processUser(user?: {name: string}) {
  // 演算子なしではTSがエラーを返します: userはundefinedになる可能性があります
  console.log(user!.name); // 演算子!はuserが定義されていることを保証します
}

主な特徴:

コンパイル時のエラーを除去するだけで、ランタイムのロジックには影響しません。
値が非nullであることが保証されている場合にのみ使用します。
過剰または無意識の使用は、実行時エラーを引き起こします。

トリックの質問。

!を任意の型の任意の値に使用できますか？例えば: let x: number = y!

演算子!は、コンパイラの観点からnull/undefinedを含む可能性のある型に対してのみ意味があります。nullableでない厳密に型指定された変数には効果がありません。

!はnull/undefinedのチェックを完全に置き換えますか？ランタイムでのチェックは必要ですか？

いいえ、演算子!は実行時のチェックを行いません。これはコンパイラにのみ役立ち、実際の値がundefined/nullである場合、実行時エラーが発生します。

function foo(data?: string) {
  // エラーを引き起こす可能性があります
  alert(data!.length);
}

!は、元の変数が別のスレッドで変更された場合に非同期コードのエラーを防ぐことができますか？

いいえ。演算子!は使用地点でのみ機能します。チェックと使用の間に値がundefinedに変わった場合、エラーは避けられません。常にnullでないことの現実に自信を持つ必要があります。

典型的なエラーとアンチパターン

値の存在に自信がないときにエラーを「抑圧」するために!を使用する。
実際の文脈を理解せずに広範に使用する。
必要な型がある場所や確実なランタイムチェックのある場所で!を適用する。

実生活の例

ネガティブケース

Reactコンポーネント内で、事前のチェックなしにrefを通じてDOMにアクセスするとき:

const ref = useRef<HTMLDivElement>(null);
ref.current!.focus(); // ref.currentがnullの場合、ランタイムエラーが発生します

利点:

コンパイルエラーを抑制します。

欠点:

存在しない要素にアクセスすると、致命的な実行時エラーが発生する可能性があります。

ポジティブケース

利用前に存在チェックを使用:

if (ref.current) {
  ref.current.focus();
}