TypeScript：ユニオン型とリテラル型

出力2行。1 / A001

const ではなく let を使う。型は number | string。

let id: number | string = 1;
console.log(id);

id = "A001";
console.log(id);

縦棒 | でつなぐのがユニオン型。どちらの型も代入できるが、それ以外（true など）は代入できない。

解答 == B

掛け算は数値にしかできない。

B

ユニオン型のままでは、両方に共通する操作しかできない。掛け算をしたいなら、先に number であることを確認する必要がある。

出力 == 対応中

type Status = "未対応" | "対応中" | "完了"; と書く。

type Status = "未対応" | "対応中" | "完了";

const current: Status = "対応中";

console.log(current);

リテラル型は「この値だけ」を許す型。"完了済" のような打ち間違いが、実行前にエラーになる。

const found: number ____ null = null;

console.log(found ?? "該当なし");

出力 == 該当なし

複数の型をつなぐ記号。縦棒1本。

|

?? は null と undefined のときだけ既定値を返す（JS03）。ユニオン型と組み合わせると安全に扱える。

解答 == B

リテラル型は指定した値だけを許す。

B

Type '"C"' is not assignable to type 'S' というエラーになる。TS01のS04で「string型だがどんな文字列でも入る」と指摘した問題が、これで解決した。

出力2行。42 / ABC

typeof で分岐する。戻り値の型は number | string になる。

function process(v: number | string): number | string {
  if (typeof v === "number") {
    return v * 2;
  }
  return v.toUpperCase();
}

console.log(process(21));
console.log(process("abc"));

if の中では number、外では string として扱える。TypeScriptが文脈から型を絞り込んでくれるので、それぞれの型に固有のメソッドが使える。

____ Rank = "S" | "A" | "B";

const r: Rank = "A";
console.log(r);

出力 == A

型に別名を付けるキーワード。小文字で4文字。

type

type で型に名前を付けられる。同じ型を何度も書かずに済み、名前自体が意味の説明になる（TS07で詳しく扱う）。

解答 == B

null にはプロパティが無い。

B

Object is possibly 'null' というエラーになる。JS07で Cannot read properties of null に悩まされた問題が、書いた時点で防げる。

出力2行。ノートPC / 該当なし

戻り値の型は string | null。?? で既定値を指定する。

function findName(id: number): string | null {
  return id === 1 ? "ノートPC" : null;
}

console.log(findName(1) ?? "該当なし");
console.log(findName(99) ?? "該当なし");

「見つからないかもしれない」を型で表現している。呼び出す側は null の可能性を無視できないので、対処を忘れることがない。

出力 == 2

型は Rank[] と書ける。filter で数える。

type Rank = "S" | "A" | "B";

const ranks: Rank[] = ["S", "A", "B", "A"];
const countA = ranks.filter((r) => r === "A").length;

console.log(countA);

リテラル型の配列も作れる。"C" のような不正な値を混ぜようとすれば、その場でエラーになる。

出力3行。品切れ / 残りわずか / 在庫あり

type StockStatus = "品切れ" | "残りわずか" | "在庫あり"; と定義し、戻り値の型に使う。

type StockStatus = "品切れ" | "残りわずか" | "在庫あり";

function stockStatus(stock: number): StockStatus {
  if (stock === 0) {
    return "品切れ";
  }
  if (stock < 10) {
    return "残りわずか";
  }
  return "在庫あり";
}

console.log(stockStatus(0));
console.log(stockStatus(5));
console.log(stockStatus(50));

戻り値をリテラル型にすると、返せる値が3つに限定される。もし return "在庫切れ"; と書き間違えれば、その場でエラーになる。

出力2行。ID-001 / ID-042

typeof で分岐し、数値なら文字列に変換する。padStart(3, "0") でゼロ埋めできる。

function normalizeId(id: number | string): string {
  const str = typeof id === "number" ? String(id) : id;
  return `ID-${str.padStart(3, "0")}`;
}

console.log(normalizeId(1));
console.log(normalizeId("42"));

ユニオン型を受け取り、1つの型に統一して返す——実務でよくある「正規化」の処理。入口は緩く、出口は厳密にするのが扱いやすい設計。

出力2行。マウス / 商品が見つかりません

find の結果は undefined になりうるので、?? null で null に統一する。戻り値の型は { id: number; name: string } | null。

const products = [
  { id: 1, name: "ノートPC" },
  { id: 2, name: "マウス" },
];

function findProduct(id: number): { id: number; name: string } | null {
  return products.find((p) => p.id === id) ?? null;
}

for (const id of [2, 99]) {
  const found = findProduct(id);
  console.log(found ? found.name : "商品が見つかりません");
}

?? null で undefined を null に統一している。2種類の「無い」が混在すると扱いが煩雑になるので、どちらかに揃えるのが実務の定石。

出力3行。発送済 / 配達完了 / 完了

戻り値の型は Status | null。switch か if で分岐する。

type Status = "未発送" | "発送済" | "配達完了";

function nextStatus(current: Status): Status | null {
  if (current === "未発送") {
    return "発送済";
  }
  if (current === "発送済") {
    return "配達完了";
  }
  return null;
}

for (const s of ["未発送", "発送済", "配達完了"] as Status[]) {
  console.log(nextStatus(s) ?? "完了");
}

状態遷移をリテラル型で表現している。取りうる状態が3つに限定されているので、存在しないステータスへ遷移するコードは書けない。

出力 == 600

型は (number | string)[]。typeof で分岐し、文字列は Number() で変換して Number.isNaN() で判定する（JS10）。

const values: (number | string)[] = [100, "200", 300, "abc"];

let total = 0;

for (const v of values) {
  if (typeof v === "number") {
    total += v;
    continue;
  }

  const num = Number(v);
  if (!Number.isNaN(num)) {
    total += num;
  }
}

console.log(total);

ユニオン型の配列を、型ごとに処理を分けて扱っている。Number("abc") は NaN になるので、JS10で学んだ Number.isNaN() での判定が必要になる。