0Pricing
TypeScript Academy · レッスン

ユニオンとインターセクションの実践パターン

実際の開発にユニオンとインターセクションを適用します。

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

はじめに

ユニオン型と交差型は、実際の TypeScript で使われる多くのパターンを支えています。このレッスンでは、本番コードで使用する実践的な組み合わせを学びます。

省略可能なペイロードパターン

ユニオンを使って、データを持つ場合と持たない場合がある関数やイベントをモデル化します。
type Event =
  | { type: 'click'; x: number; y: number }
  | { type: 'keypress'; key: string }
  | { type: 'blur' };

交差型による Builder/Mixin

交差型を使って機能セットを組み合わせ、結合された型を作成します。
type Serializable = { serialize(): string };
type Validatable = { validate(): boolean };
type Model = Serializable & Validatable & { id: number };

入力の正規化に使うユニオン

関数で柔軟な入力型を受け取り、標準的な型に正規化します。
function toArray<T>(val: T | T[]): T[] {
  return Array.isArray(val) ? val : [val];
}

交差型によるブランド型

一意のブランドマーカーと交差させることで、同じプリミティブから異なる型を作成します。
type UserId = number & { __brand: 'UserId' };
type PostId = number & { __brand: 'PostId' };
// Prevents accidentally mixing IDs

WithOptional パターン

Partial との交差型を使って、一部のフィールドを必須にし、残りを省略可能にしたベース型を作成します。
type RequiredFields = { id: number; email: string };
type OptionalFields = Partial<{ name: string; bio: string }>;
type UserUpdate = RequiredFields & OptionalFields;

多相的なコンポーネント Props

React では、ユニオン型を使って判別子に応じてコンポーネントの props を変えられます。
type ButtonProps =
  | { variant: 'primary'; onClick: () => void }
  | { variant: 'link'; href: string };

サードパーティ型の拡張

サードパーティの型に独自の追加要素を交差させます。
import type { Request } from 'express';
type AuthRequest = Request & { user: User };

ユニオンと交差型の組み合わせ

ユニオンと交差型は組み合わせられます。括弧で優先順位を制御します。
type Admin = { role: 'admin' };
type User = { role: 'user' };
type LoggedIn = { sessionId: string };
type AuthUser = (Admin | User) & LoggedIn;

ユニオンメンバーの型ガード

再利用可能な型ガード関数を作成して、同じチェックを繰り返さずにユニオンを絞り込みます。
function isAdmin(u: AuthUser): u is Admin & LoggedIn {
  return u.role === 'admin';
}

交差型における分配動作

分配法則：A & (B | C) = (A & B) | (A & C)。TypeScript はこれを自動的に適用します。
type Base = { id: number };
type AB = Base & (string | number);
// equivalent to: (Base & string) | (Base & number)

確認問題

ID の誤った混在を防ぐため、`number` から異なる型を作成するパターンはどれですか。

まとめ

ユニオン型と交差型を組み合わせると、ブランド付き ID、Mixin の振る舞い、柔軟な入力、判別可能なコンポーネント props など、実際の複雑な形状をモデル化できます。これらのパターンを習得して、本番品質の TypeScript コードを書けるようにしましょう。

よくある質問

「ユニオンとインターセクションの実践パターン」レッスンは無料ですか？

はい。「ユニオンとインターセクションの実践パターン」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと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フィードバックを取得できます。ローカル設定は不要です。

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

  1. ユニオン型：AまたはB
  2. インターセクション型：AかつB
  3. 安全なパターンマッチングのための判別可能なユニオン
  4. ユニオンとインターセクションの実践パターン
← TypeScript Academyに戻る