Dev Study
← 解説「リテラル型」に戻る

サンプルコードで身につける: リテラル型

解説で学んだ概念を、5つの具体例で確認します。素朴な例から実務寄りの例へと進みます。

1on と off しか入らないスイッチ

リテラル型のユニオンで「決まった2つの値しか入らない」変数を作る最小の例です。候補にない文字列を代入しようとした瞬間にエラーになるので、タイプミスが実行前に見つかります。

TypeScript

2数値リテラル型のサイコロ

リテラル型は文字列だけでなく数値でも作れます。サイコロの目は1〜6しかあり得ない、という現実のルールがそのまま型になり、7のようなあり得ない値を弾けます。

TypeScript

3サイズ指定を3択に限定したボタン

関数の引数をリテラル型のユニオンにすると、呼び出し側は決められた候補しか渡せなくなります。UI コンポーネントのサイズや色の指定など、選択肢を型で縛りたい場面の定番です。

TypeScript

4リテラル型で料金表を安全に引く

リテラル型の値は、同じキーを持つオブジェクトの添字として安全に使えます。size が "S" | "M" | "L" に限定されているおかげで、料金表に必ず対応する値があるとコンパイラが保証できるのです。

TypeScript

5注文ステータスの遷移を型で守る

注文の状態のような「決まった段階を進む値」はリテラル型のユニオンで表すのが実務の定番です。string で持つと "shiped" のようなタイプミスが混入しますが、リテラル型なら定義した瞬間に検出されます。

TypeScript