TypeScriptTypeScript24 min read

Discriminated Unions

Design clean union models using a common discriminator field for safe branching logic.

David Miller
January 13, 2026
0.3k8

Discriminated unions use a common field to decide type.

      ## Example: API state
      ```ts
      type Loading = { status: "loading" };
      type Success = { status: "success"; data: string };
      type ErrorState = { status: "error"; message: string };
      
      type State = Loading | Success | ErrorState;
      ```
      
      ## Handle safely
      ```ts
      function render(s: State) {
        switch (s.status) {
          case "loading":
            return "Loading...";
          case "success":
            return s.data;
          case "error":
            return s.message;
        }
      }
      ```
      
      TypeScript knows which fields exist.
      
      ## Graph
      ```mermaid
      flowchart TD
        A[State] --> B[loading]
        A --> C[success]
        A --> D[error]
      ```
      
      ## Remember
      - Use a shared tag field
      - Makes logic safe and readable
      
#TypeScript#Advanced#Unions