リテラルをユニオンにまとめる
リテラル型をユニオンにまとめ、有限個の値の集合を構築します。
「リテラルをユニオンにまとめる」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
リテラル型のユニオン
リテラル型のユニオンは、複数の既知の選択肢のうち、正確に1つでなければならない値を表します。ステートマシン、列挙型、型安全な API の基盤となるものです。
type Status = 'idle' | 'loading' | 'success' | 'error';
let state: Status = 'idle';
state = 'loading';
console.log('State:', state);リテラル型のユニオンを switch で処理する
リテラル型のユニオンに対する switch は読みやすく、コンパイラーは各ケースが許可された値のいずれかであることを認識します。網羅性チェックとも相性が抜群です。
type Status = 'idle' | 'loading' | 'done';
function label(s: Status): string {
switch (s) {
case 'idle': return 'Waiting';
case 'loading': return 'Working';
case 'done': return 'Finished';
}
}
console.log(label('loading'));網羅的な処理
ユニオンのすべてのメンバーを処理することを網羅的な処理と呼びます。すべてのケースを扱うと、TypeScript は分岐漏れがなく、関数が必ず戻ることを証明できます。
type Dir = 'left' | 'right';
function step(d: Dir): number {
if (d === 'left') return -1;
return 1; // only 'right' remains
}
console.log(step('left'), step('right'));never による網羅性チェックのテクニック
default 分岐で値を never に代入すると、新しいユニオンメンバーを追加したのに処理を忘れた場合、コンパイルエラーが強制的に発生します。これは、進化するコードを守る安全網です。
type Shape = 'circle' | 'square';
function area(s: Shape): string {
switch (s) {
case 'circle': return 'pi r^2';
case 'square': return 'a^2';
default:
const _exhaustive: never = s;
return _exhaustive;
}
}
console.log(area('circle'));const オブジェクトからユニオンを導出する
よく使われるパターンは、値を const オブジェクトに保持し、typeof obj[keyof typeof obj] を使って値からユニオンを導出する方法です。1つの情報源から、2つの出力を得られます。
const Colors = { Red: 'red', Blue: 'blue' } as const;
type Color = typeof Colors[keyof typeof Colors];
// 'red' | 'blue'
const c: Color = Colors.Blue;
console.log(c);キーからユニオンを導出する
keyof typeof obj を使えば、キーのユニオンも導出できます。キー自体が意味のある識別子である場合に便利です。
const ICONS = { home: 0, search: 1, profile: 2 } as const;
type IconName = keyof typeof ICONS;
// 'home' | 'search' | 'profile'
const name: IconName = 'search';
console.log(name, ICONS[name]);リテラルタグによる判別可能なユニオン
各オブジェクトのバリアントにリテラルのタグプロパティを付けると、TypeScript はそれらを判別できます。タグを確認することで、正確な形状に型を絞り込めます。
type Action =
| { type: 'add'; amount: number }
| { type: 'reset' };
function reduce(a: Action): number {
if (a.type === 'add') return a.amount;
return 0;
}
console.log(reduce({ type: 'add', amount: 5 }));判別子による型の絞り込み
リテラルの判別子をテストすると、コンパイラーはどのバリアントかを認識するため、そのバリアント固有のフィールドにキャストなしで安全にアクセスできます。
type Event =
| { kind: 'click'; x: number; y: number }
| { kind: 'key'; code: string };
function handle(e: Event): string {
if (e.kind === 'key') return 'Key ' + e.code;
return 'Click ' + e.x + ',' + e.y;
}
console.log(handle({ kind: 'key', code: 'Esc' }));複数のユニオンを組み合わせる
名前付きの小さなユニオンから、より大きなユニオンを構成できます。これにより、関連する選択肢をまとめて、コードベース全体で再利用できます。
type Primary = 'red' | 'blue' | 'yellow';
type Secondary = 'green' | 'orange';
type Color = Primary | Secondary;
const c: Color = 'green';
console.log(c);関数の制約としてのユニオン
関数にリテラル型のユニオンを渡すと、呼び出し元を有効な選択肢に制限でき、エディターの自動補完も利用できます。安全性と見つけやすさを兼ね備えた、非常に強力な組み合わせです。
type Align = 'left' | 'center' | 'right';
function setAlign(a: Align): void {
console.log('Aligned', a);
}
setAlign('center');
// setAlign('top'); // Errorリテラル型のユニオンが string より優れている理由
単なる string 型の引数では、タイプミスを含むあらゆる値を受け入れてしまいます。リテラル型のユニオンなら、コンパイル時に間違いを検出し、有効な選択肢を明示できます。保守しやすいコードへの明確な改善です。
type Method = 'GET' | 'POST' | 'PUT' | 'DELETE';
function request(m: Method, url: string): void {
console.log(m, url);
}
request('POST', '/api/users');理解度チェック
リテラル型のユニオンの理解度を確認しましょう。
まとめ：リテラルの組み合わせ
次のことを学びました：
- 有限個の選択肢の集合に対して、リテラル型のユニオンを構築する。
neverを使った安全策により、ユニオンを網羅的に処理する。keyof typeofとtypeof obj[keyof typeof obj]を使い、const オブジェクトからユニオンを導出する。- リテラルのタグプロパティでバリアントを判別する。
次のコースでは、特殊な unknown、never、void 型を扱います。
const ROUTES = { home: '/', about: '/about' } as const;
type Route = typeof ROUTES[keyof typeof ROUTES];
const r: Route = '/about';
console.log(r);
AI チューターと学ぶ TypeScript — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 101
- レッスン
- 352
よくある質問
「リテラルをユニオンにまとめる」レッスンは無料ですか？
はい。「リテラルをユニオンにまとめる」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「リテラルをユニオンにまとめる」で何を学びますか？
リテラル型をユニオンにまとめ、有限個の値の集合を構築します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「リテラルをユニオンにまとめる」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 文字列リテラル型と数値リテラル型
- 真偽値リテラルとリテラル推論
- as constによるconstアサーション
- リテラルをユニオンにまとめる