Discriminated Unions & Pattern Matching

Type Inference & Literal Types (const vs. let)

Discover how TypeScript infers types automatically and how let versus const declarations shape wide types versus narrow literal types.

1. Tagged State Machines

A Discriminated Union (also called a Tagged Union or Algebraic Data Type) is a union of object shapes that share a single common literal property (the "discriminator" tag).

2. Why Discriminated Unions Rule

They allow TypeScript to narrow complex object shapes instantly in switch statements or if blocks with 100% type safety.

3. The Pattern

Define a common literal property (e.g. kind or status) across all union members:

type NetworkState =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: string[] }
  | { status: "error"; error: Error };

function renderUI(state: NetworkState): string {
  // Narrowing occurs automatically based on the 'status' tag!
  switch (state.status) {
    case "idle":
      return "Ready to load.";
    case "loading":
      return "Loading data...";
    case "success":
      return `Loaded ${state.data.length} items.`; // Safe to access state.data!
    case "error":
      return `Error: ${state.error.message}`;     // Safe to access state.error!
  }
}

4. Visual Discriminated Narrowing

[ NetworkState Union ]
    ├── status: "idle"
    ├── status: "loading"
    ├── status: "success" (data: string[])  <-- Narrowed via case "success"!
    └── status: "error"   (error: Error)

5. Common Mistakes

• Mismatched Discriminator Names: Using kind on one member and type on another prevents TypeScript from identifying the discriminator tag. Keep the discriminator property name identical across all members!

6. Next Steps

Use discriminated unions for Redux actions, API state machines, and AST nodes. Next, let's explore Built-in Utility Types: Partial, Required, Readonly, Pick, and Omit!