34. 非nullアサーション !

値の後ろに ! を付けると「この値は絶対に null や undefined ではない」とコンパイラに宣言できます。findLabel(1)! のように書くと、string | null だった型から null が取り除かれ、string として扱えるようになります。

実務では「直前の処理の流れから、ここでは必ず値がある」と分かっているのに、コンパイラはそれを追えない場面で使います。配列の find の結果など、「見つからないかもしれない」型を返す API に対して、確実に存在すると分かっているときに付けるのが典型です。

つまずきポイントは、! が as よりさらに危険なことです。as は少なくとも型の形を書きますが、! は根拠を何も書かずにチェックを黙らせるだけです。保証が間違っていれば実行時エラーになります。まずは if での絞り込みや ?? を検討し、! は最後の手段にしましょう。

▶ サンプルコードを実行してみよう(自由に書き換えてOK)

TypeScript

function findLabel(id: number): string | null {
  return id === 1 ? "重要" : null;
}

// 戻り値の型は string | null だが、id 1 は必ずあると自分で保証する
const label = findLabel(1)!;
console.log(label.toUpperCase()); // ! のおかげで string として扱える

// 配列の find も「見つからないかもしれない」型を返す定番の場面
const fruits = ["apple", "banana", "cherry"];
const hit = fruits.find(function (f) { return f === "banana"; })!;
console.log(hit.toUpperCase());

// 保証が間違っていると、コンパイルは通るのに実行時に壊れる
// const missing = findLabel(99)!;
// console.log(missing.toUpperCase()); // 実行時エラーになる

サンプルコードで身につける(5本) →

学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。

公式ドキュメントで詳しく ↗