ユニオン型

このレッスンでは、「複数の型のうちどれか」を表すユニオン型の書き方を学びます。「TypeScript ユニオン型使い方」で調べている方向けです。

型A | 型Bという書き方で、「型Aか型Bのどちらか」を表現できます。例えばnumber | stringは「数値または文字列」を意味します。

サンプルコードでは、function formatId(id: number | string): stringという関数を作り、typeofで実際の型を判定してから処理を分けています。この「型を確認してから処理を分岐する」書き方を型ガードと呼びます。

初心者がよくつまずくのが、ユニオン型の変数に対して、片方の型にしかないメソッドをいきなり呼び出してしまうことです。typeofやinstanceofで型を絞り込んでから使う必要があります。

実際の開発現場では、APIのレスポンスが「成功時はデータ、失敗時はエラーメッセージ」のように複数の形を取りうる場合に、ユニオン型がよく使われます。

📖 お手本コード

function formatId(id: number | string): string {
  if (typeof id === "number") {
    return `ID-${id.toString().padStart(4, "0")}`;
  }
  return id.toUpperCase();
}
console.log(formatId(42));
console.log(formatId("abc"));

✍️ あなたのコード

コードを書いたら「実行する」を押してください

🧪 このサイトではTypeScriptを直接コンパイル・実行できないため、お手本コードと同じ内容を入力できたかをその場で判定します(採点はブラウザ内だけで行われ、どこにも送信されません)。

🎯

ここまでできればゴール達成!
数値でも文字列でも扱えるID整形処理が作れるようになります。