Discriminated unions model states safely with TypeScript. Here's how to use them effectively.
Basic Discriminated Union
Loading code block...
API Response States
Loading code block...
Redux Actions
Loading code block...
Exhaustive Checking
Loading code block...
State Machines
Loading code block...
Form Validation
Loading code block...
HTTP Response Handling
Loading code block...
Event Handling
Loading code block...
Nested Discriminated Unions
Loading code block...
Factory Functions
Loading code block...
Best Practices
Design:
✓ Use literal types for discriminant
✓ Name discriminant consistently (type, kind, status)
✓ Keep discriminant at top of type
✓ Use assertNever for exhaustive checks
Type Safety:
✓ Prefer switch over if/else
✓ Create type guards for reuse
✓ Use Extract/Exclude for filtering
✓ Document state transitions
Avoid:
✗ Optional discriminant properties
✗ Non-literal discriminant types
✗ Overlapping discriminant values
✗ Missing exhaustive checks
Conclusion
Discriminated unions model complex states type-safely. Use them for API responses, Redux actions, state machines, and any scenario with multiple variants. The discriminant property enables TypeScript to narrow types automatically in switch statements.