Discriminated Unions

Discriminated unions (tagged unions) use a common property to distinguish between union members, enabling type-safe pattern matching.

Basic Discriminated Union

Click Run to execute your code

Why Use Discriminated Unions?

• Type safety: TypeScript narrows types automatically
• Exhaustiveness: Compiler ensures all cases handled
• Clarity: Clear intent with explicit type tags
• Refactoring: Adding new types shows missing cases

Pattern Matching

type Result = 
    | { status: "success"; data: T }
    | { status: "error"; error: string }
    | { status: "loading" };

function handleResult(result: Result) {
    switch (result.status) {
        case "success":
            console.log(result.data);  // ✓ TypeScript knows data exists
            break;
        case "error":
            console.log(result.error);  // ✓ TypeScript knows error exists
            break;
        case "loading":
            console.log("Loading...");
            break;
    }
}

Common Mistakes

// ✗ Wrong - different property names
type A = { type: "a"; value: string };
type B = { kind: "b"; value: number };  // Different name!

// ✓ Correct - same property name
type A = { kind: "a"; value: string };
type B = { kind: "b"; value: number };

type Shape = Circle | Rectangle | Triangle;

function area(shape: Shape): number {
    switch (shape.kind) {
        case "circle":
            return Math.PI * shape.radius ** 2;
        case "rectangle":
            return shape.width * shape.height;
        // ✗ Missing triangle case!
    }
    return 0;  // Unsafe fallback
}

Summary

What's Next?

Congratulations! Module 4 complete. Next: Generics & Utility Types!