30. null と undefined — strictNullChecks

TypeScript には「値が無い」ことを表す値が2つあります。null と undefined です。設定ファイルで strictNullChecks を有効にすると、string などの普通の型に null や undefined を入れるとエラーになり、「無いかもしれない」値は string | null のようにユニオン型で明示する決まりになります。

実務のバグの多くは「値があると思ったら無かった」ことが原因です。検索して見つからないかもしれない関数の戻り値を string | null にしておけば、null の可能性をコンパイラが追跡し、確認せずに使おうとした箇所を教えてくれます。実務のプロジェクトでは strictNullChecks はほぼ必ず有効にします。

つまずきポイントは、この設定が無効の環境では null の代入が素通りしてしまうことです。「エラーが出ないから安全」とは限らないので、null かもしれない値は前のレッスンで学んだ等価チェックの絞り込みで確認してから使う習慣をつけましょう。

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

TypeScript

// strictNullChecks が有効だと、普通の型に null は入れられない
// let title: string = null; // strict 設定ではこの行がエラーになる

// 「文字列か null のどちらか」を型で明示する
let middleName: string | null = null;
console.log(middleName);

middleName = "Alex";
console.log(middleName);

function findUser(id: number): string | null {
  return id === 1 ? "Taro" : null;
}

const foundUser = findUser(2);
if (foundUser === null) {
  console.log("ユーザーは見つかりませんでした");
} else {
  console.log(foundUser.toUpperCase());
}

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

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

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