「ないかもしれない」を扱う

自由入力にせず、選択肢を決める

type Status = "下書き" | "申請中" | "承認済み";

let status: Status = "申請中";

縦棒|は「いずれか」を表します。この例では状態を3種類に限定します。これをユニオン型と呼びます。決めた文字列そのものを型に使う「リテラル型」と組み合わせています。

単なるstringなら「承認済」「承認ずみ」も文字列として受け付けます。選択肢を決めれば表記のばらつきを検出しやすくなります。ですが、申請中から承認済みに変えてよいか、誰が変更できるかは、別の業務ルールです。

「値がない」にも、表現がある

空文字・0・null・undefinedは同じものではありません。たとえば「金額未入力」と「0円」を同じ扱いにすると、集計や承認の判断が変わってしまいます。

あることを確かめてから使う

function showMemo(memo: string | undefined): string {
  if (memo === undefined) {
    return "メモなし";
  }
  return memo.toUpperCase();
}

メモは文字列か、未設定かのどちらかです。最初のifで未設定のケースを処理すると、その先は文字列として扱えます。条件から型の候補を絞ることをナローイング（型の絞り込み）と呼びます。

「もし存在するなら使う」のように、値の状態によって処理を分けるのが基本です。「絶対にあるはず」と宣言して確認を省くと、実際には存在しないケースで失敗する可能性があります。

?. と ?? の読み方

type User = { name: string };
function approverLabel(approver: User | null): string {
  return approver?.name ?? "未設定";
}

const label = approverLabel(null);

?.は、左側がnullかundefinedなら、その先の項目にアクセスせずundefinedを返します。??は、左側がnullかundefinedのときだけ右側の代わりの値を使います。この例のlabelは「未設定」です。

??は0や空文字を「値がない」とはみなしません。似た記号の||は0や空文字でも代わりの値を使うため、金額などで取り違えると結果が変わります。記号の暗記よりも「何を未設定として扱うか」を確認しましょう。

見つからなかったときも、正常な道筋にする

社員番号で承認者を検索しても、退職や異動で見つからないことがあります。ネットワークの通信が成功しても、データが空のこともあります。「必ずある」だけで設計すると、こうした場面で画面が止まる原因になります。