リテラル型

このレッスンでは、特定の値そのものを型として使うリテラル型の書き方を学びます。「TypeScript リテラル型」で調べている方向けです。

文字列や数値そのものを型として指定でき、ユニオン型と組み合わせると「決まったいくつかの値しか許さない」型を作れます。例えば"small" | "medium" | "large"と書けば、その3つの文字列以外は代入できなくなります。

サンプルコードでは、type Size = "small" | "medium" | "large";を定義し、サイズごとに違う価格を返す関数を作っています。存在しない値(例えば"huge")を渡そうとするとコンパイルエラーになります。

初心者がよくつまずくのが、普通のstring型との違いです。string型はどんな文字列でも受け付けますが、リテラル型は決められた候補以外を弾いてくれる点が大きな違いです。

実際の開発現場では、注文のサイズ・ステータス(「進行中」「完了」など)のように、取りうる値が決まっている項目でリテラル型がよく使われます。

📖 お手本コード

type Size = "small" | "medium" | "large";

function priceOf(size: Size): number {
  const prices: Record<Size, number> = { small: 300, medium: 400, large: 500 };
  return prices[size];
}
console.log(`Mサイズ: ${priceOf("medium")}円`);

✍️ あなたのコード

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

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

🎯

ここまでできればゴール達成!
サイズごとに価格が決まった、簡単な注文システムの土台が作れるようになります。