ユニオン型の絞り込み ― truthy 判定と制御フロー分析

導入

API から返ってくる値が「文字列のこともあれば null のこともある」というのは実務でよくある形です。第2章では typeof を使った絞り込みを学びましたが、null が混ざるユニオン型では、もっと手軽なtruthy 判定による絞り込みもよく使われます。

説明

if (value) のように値そのものを条件にすると、TypeScript は「truthy（真とみなせる値）かどうか」で型を絞り込んでくれます。これを制御フロー分析（control flow analysis）と呼びます。

function printLength(value: string | null): void {
  if (value) {
    console.log(value.length);      // ここでは string に絞り込まれている
  } else {
    console.log("値がありません");   // ここでは null に絞り込まれている
  }
}
printLength("hello");
printLength(null);

graph TD
    start["value: string | null"]
    start -->|truthy| str["string に絞り込み<br/>value.length が使える"]
    start -->|falsy| nullBranch["null（や空文字）に絞り込み"]

注意点があります。""（空文字）や 0 は文字列・数値ですが falsy なので、else 側に入ってしまいます。「値があるかどうか」を厳密に見たいときは value !== null のように比較する方が安全です。

function printLengthStrict(value: string | null): void {
  if (value !== null) {
    console.log(value.length);   // 空文字でもこちらに入る
  } else {
    console.log("値がありません");
  }
}
printLengthStrict("");   // 0（空文字の length）

やってみよう

printLength("") を呼び出して、空文字が else 側に落ちてしまうことを確かめましょう。次に printLengthStrict("") を呼び出して、挙動の違いを比べてみてください。

演習

describe という関数を作ってください。引数 value: number | null を受け取り、value が truthy なら文字列 "値は" + value を、そうでなければ "値なし" を返します。console.log(describe(5)) で結果を表示してください。