TypeScript Academy · レッスン

TupleToUnionとUnionToIntersection

Q: 「TupleToUnionとUnionToIntersection」で何を学びますか？

タプルとユニオンをプログラムで相互変換します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

タプルとユニオンをプログラムで相互変換します。

「TupleToUnionとUnionToIntersection」はCoddyKit上の無料TypeScript Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。

TupleToUnion: 概念

TupleToUnionはタプル型を要素型のユニオン型に変換します。個々の型からタプルを構築する処理の逆です。

type TupleToUnion<T extends readonly any[]> = T[number];
type A = TupleToUnion<[string, number, boolean]>; // string | number | boolean

T[number] の仕組み

タプルをnumberでインデックス指定すると、すべての数値インデックスに一度にアクセスできます。TypeScript では、これを要素型のユニオン型として表現します。

type Tuple = [string, number, boolean];
type Elements = Tuple[number]; // string | number | boolean

as const を使った TupleToUnion

as const配列と組み合わせると、値の配列からユニオン型を導出できます。

const COLORS = ["red", "green", "blue"] as const;
type Color = typeof COLORS[number]; // "red" | "green" | "blue"

UnionToIntersection: 概念

ユニオン型からインターセクション型への変換はより難しく、すべてのメンバーを集めるために、関数型を使った分配条件型が必要です。

type UnionToIntersection<U> =
  (U extends any ? (x: U) => void : never) extends (x: infer I) => void
    ? I
    : never;

関数トリックが機能する理由

ユニオンの各メンバーを分配し、それぞれを関数型でラップします。TypeScript は、構造上の制約を満たすために、すべてのパラメーター型のインターセクション型を推論します。

type A = UnionToIntersection<{ a: 1 } | { b: 2 }>;
// { a: 1 } & { b: 2 }

UnionToTuple: 難しい問題

ユニオン型からタプルへの変換は理論上可能ですが、評価順序に依存します（TypeScript は評価順序を保証しません）。本番環境では避けてください。

// Not reliable — union member order is unspecified
// Use TupleToUnion (safe) not UnionToTuple (fragile)

TupleToUnion の実用例

文字列リテラルのタプルから有効なキーをすべて抽出し、検証用のユニオン型を構築します。

const ALLOWED_METHODS = ["GET", "POST", "PUT", "DELETE"] as const;
type HttpMethod = typeof ALLOWED_METHODS[number];
function request(method: HttpMethod) { /* ... */ }

UnionToIntersection の実用例

ユニオンに含まれる複数のミックスインインターフェースを、1 つの統合された型にまとめます。

type Mixin1 = { log(): void };
type Mixin2 = { save(): Promise<void> };
type Combined = UnionToIntersection<Mixin1 | Mixin2>;
// { log(): void } & { save(): Promise<void> }

プリミティブ型のインターセクション

無関係なプリミティブ型を交差させるとneverになります。stringとnumberの両方になる値は存在しないためです。

type X = UnionToIntersection<string | number>; // never

ジェネリック制約での使用

TupleToUnionとUnionToIntersectionをジェネリック制約内で組み合わせると、柔軟で型安全な API を構築できます。

function merge<T extends object[]>(...args: T): UnionToIntersection<T[number]> {
  return Object.assign({}, ...args) as any;
}

まとめ: Tuple ↔ Union ↔ Intersection

TupleToUnionはT[number]によるインデックス指定を使います。UnionToIntersectionはinferを使った関数分配トリックを使います。どちらも高度な型操作に欠かせないツールです。

理解度チェック

TupleToUnion<[string, number]>は何ですか？

学習内容

TupleToUnionは数値インデックスを使ってタプルから要素のユニオン型を抽出します。UnionToIntersectionは関数分配トリックを使います。これらは、高度な TypeScript の型操作における基礎的なパターンです。

よくある質問

「TupleToUnionとUnionToIntersection」レッスンは無料ですか？

はい。「TupleToUnionとUnionToIntersection」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。

「TupleToUnionとUnionToIntersection」で何を学びますか？

タプルとユニオンをプログラムで相互変換します。ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「TupleToUnionとUnionToIntersection」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← TypeScript Academyに戻る