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.