サンプルコードで身につける: null と undefined — strictNullChecks

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

// 後から値が決まったら、普通に代入できる
middleName = "Alex";
console.log(middleName);

// strictNullChecks が有効な環境では、次のような行はエラーになる
// let nickname: string = null; // string に null は入れられない

// null は「無い」とはっきり入れた値
let registeredMail: string | null = null;
// undefined は「まだ設定されていない」状態の値
let temporaryMail: string | undefined = undefined;

console.log(registeredMail); // null
console.log(temporaryMail);  // undefined

// typeof で見ると別物だと分かる
console.log(typeof registeredMail); // object(歴史的な仕様)
console.log(typeof temporaryMail);  // undefined

registeredMail = "taro@example.com";
console.log(registeredMail);

// 見つからないかもしれない検索は「結果 | null」で表す
function findStock(productCode: string): number | null {
  if (productCode === "A-1") {
    return 12;
  }
  return null;
}

const stockA = findStock("A-1");
const stockB = findStock("Z-9");

if (stockA !== null) {
  console.log("A-1 の在庫: " + stockA + "個");
}
if (stockB === null) {
  console.log("Z-9 は見つかりませんでした");
}

// 未入力(null)と空白だけの入力をまとめて「無し」に整える
function cleanInput(rawInput: string | null): string | null {
  if (rawInput === null) {
    return null;
  }
  const trimmed = rawInput.trim();
  if (trimmed === "") {
    return null;
  }
  return trimmed;
}

const inputA = cleanInput("  Taro  ");
const inputB = cleanInput(null);

if (inputA !== null) {
  console.log("登録名: " + inputA);
}
if (inputB === null) {
  console.log("名前が未入力です");
}

interface ApiUser {
  userName: string;
  mail: string | null; // 未登録のユーザーは null で返ってくる
}

const fetchedUsers: ApiUser[] = [
  { userName: "Taro", mail: "taro@example.com" },
  { userName: "Jiro", mail: null },
];

for (const member of fetchedUsers) {
  // null を確かめた側の分岐では string として安全に使える
  if (member.mail === null) {
    console.log(member.userName + ": メール未登録");
  } else {
    console.log(member.userName + ": " + member.mail.toUpperCase());
  }
}