ユニオン型 ― 複数の型を許す

導入

「文字列または数値」のように、複数の型のどれかを受け付けたいときはユニオン型を使います。型を |（パイプ）でつなげて書きます。

説明

string | number は「文字列か数値のどちらか」という意味です。

function showId(id: string | number): void {
  console.log("ID:", id);
}
showId(123);
showId("A-45");

ユニオン型の値を使うときは、typeof などでどちらの型か確かめてからその型ならではの操作をします（型の絞り込み）。

function format(value: string | number): string {
  if (typeof value === "number") {
    return value.toFixed(2);   // number のときだけ toFixed が使える
  }
  return value.toUpperCase();  // ここでは string に絞り込まれている
}
console.log(format(3.1));   // 3.10
console.log(format("ok"));  // OK

決まった文字列だけを許す "asc" | "desc" のようなユニオンもよく使います。

やってみよう

format(10) と format("hello") を実行して、数値と文字列で処理が分かれることを確かめましょう。

演習

double という関数を作ってください。引数 x: number | string を受け取り、number なら x * 2 を、string なら x + x（連結）を返します。double(4) の結果を console.log() で表示しましょう。