Null 許容型 ('strictNull')

CoddyのJavaScriptジャーニー「Introduction To TypeScript」セクションの一部。レッスン 71/73。

デフォルトでは、TypeScriptは null と undefined を任意の型に代入することを許可しており、これは実行時エラーにつながる可能性があります。strictNullChecks コンパイラオプションは、null と undefined をそれぞれ独自の型にすることで、この動作を変更します。

strictNullChecks が有効な場合、これらの値を許可するには、型アノテーションに null または undefined を明示的に含める必要があります。

// strictNullChecks なしの場合 - これは許可されます
let name: string = null; // strictNullChecks が有効だとエラーになります！

// strictNullChecks ありの場合 - 明示的である必要があります
let name: string | null = null; // これで動作します

これにより、潜在的な null 値を使用する前に処理することが強制されます。事前にチェックを行わない限り、null である可能性がある値に対してメソッドを呼び出したりプロパティにアクセスしたりすることはできません：

function processName(name: string | null) {
  // これはエラーを引き起こします
  // console.log(name.toUpperCase());
  
  // 最初にチェックする必要があります
  if (name !== null) {
    console.log(name.toUpperCase()); // 安全に使用できます
  }
}

このコンパイラオプションは、一般的な「Cannot read property of null」ランタイムエラーをコンパイル時にキャッチすることで、それらを防ぐのに役立ち、コードの信頼性と予測可能性を高めます。

チャレンジ

簡単

null 値が含まれる可能性のあるユーザープロファイルデータを安全に処理する関数を作成します。このチャレンジでは、strictNullChecks によって、Null 許容型を明示的に処理する方法を学びます。

以下の仕様で getUserDisplayName という名前の関数を作成してください：

string | null 型のパラメータ fullName を受け取る
null でない場合は、そのフルネームを返す
フルネームが null の場合は、"Anonymous User" を返す
戻り値の型を明示的に string とする

次に、以下の仕様で formatUserEmail という名前の関数を作成してください：

string | null 型のパラメータ email を受け取る
null でない場合は、メールアドレスを小文字にして返す
メールアドレスが null の場合は、"No email provided" を返す
戻り値の型を明示的に string とする

さらに、以下の仕様で getUserInfo という名前の関数を作成してください：

string | null 型の name と、string | null 型の email の2つのパラメータを受け取る
作成した2つの関数を使用してパラメータを処理する
"Name: [processed name], Email: [processed email]" という形式の文字列を返す
戻り値の型を明示的に string とする

以下のデータを使用して関数をテストしてください：

getUserDisplayName("John Smith") を呼び出し、結果を出力する
getUserDisplayName(null) を呼び出し、結果を出力する
formatUserEmail("ALICE@EXAMPLE.COM") を呼び出し、結果を出力する
formatUserEmail(null) を呼び出し、結果を出力する
getUserInfo("Bob Johnson", "bob@test.com") を呼び出し、結果を出力する
getUserInfo(null, null) を呼び出し、結果を出力する
getUserInfo("Sarah Wilson", null) を呼び出し、結果を出力する

自分で試してみよう

// TODO: ここにコードを記述してください
// fullName (string | null) を受け取り、string を返す getUserDisplayName 関数を作成します

// email (string | null) を受け取り、string を返す formatUserEmail 関数を作成します

// name と email (どちらも string | null) を受け取り、string を返す getUserInfo 関数を作成します

// 関数をテストし、結果を出力します
console.log(getUserDisplayName("John Smith"));
console.log(getUserDisplayName(null));
console.log(formatUserEmail("ALICE@EXAMPLE.COM"));
console.log(formatUserEmail(null));
console.log(getUserInfo("Bob Johnson", "bob@test.com"));
console.log(getUserInfo(null, null));
console.log(getUserInfo("Sarah Wilson", null));