Scale Your Components With Tagged Unions and Factory Pattern
summary
Shows a concrete migration: a chat-bubble component with many optional props is refactored into TypeScript tagged unions plus extracted per-variant components and a factory components switch, moving impossible runtime states into compile-time errors. Uses TypeScript narrowing, literal discriminants and TypeScript 4.9’s satisfies with never check to force exhaustiveness. The built demo compiles and rejects invalid prop combinations, reduces JSX conditionals, and warns when a new variant is added; works well for distinct-UI same-concept variants but not for tiny boolean toggles or divergent business logic.
AI-written summary · about
chapters (10)
- 0:00Introduction
- 1:07Monolithic component problems
- 3:34Tagged unions for type safety
- 5:18Demo: Discriminated unions in TypeScript
- 6:23Type narrowing with tagged unions
- 8:52Factory pattern for composition
- 10:37Benefits of isolated variants
- 12:47Compile-time checks with satisfies
- 13:30When to use or avoid
- 14:13Final advice
related talks
37mBuilding Better Components — A Journey to a More Resilient Frontend
15mTypeScript Patterns for Better React Components
18mTypeScript Patterns For Better React Components
28mBuilding Considerate React Component APIs with TypeScript
49mTypescript + React
34mNot Your Uncle’s Clean Code (TypeScript Edition)
34mSecrets of building robust UI components
44mA Deep Dive Into Advanced TypeScript - A Live Coding Expedition