TypeScript Patterns for Better React Components
summary
Walks through concrete TypeScript recipes: how to type Compound Components and Polymorphic Components, how to type and augment forwardRef so no type casts are needed, and how React Server Components work with TypeScript 5.1 (components can return Promise). Shows a working slot pattern that clones and merges props, recommends runtime parsing with Zod for API shapes, warns enums add bundle overhead, and reports interfaces sometimes speed up editor type-checking.
AI-written summary · about
chapters (17)
- 0:00TypeScript and React history
- 6:43Boolean props and unions
- 11:25Custom vs styled components
- 12:30HTML attributes in React
- 16:49Typing function components
- 19:20Reusing types effectively
- 21:06Compound and polymorphic components
- 24:37Generics in components
- 25:41ForwardRef components
- 27:45React Context with defaults
- 29:32Overloading components
- 30:36Type vs interface for props
- 33:05Type annotations speed
- 35:16Zod for unknown types
- 37:50Cleaner TypeScript tooling
- 39:38TypeScript config and flags
- 41:28Summary and best practices
related talks
18mTypeScript Patterns For Better React Components
15mTypeScript Patterns for Better React Components
49mTypescript + React
23mTypeScript + React = ❤️
37mBuilding Better Components — A Journey to a More Resilient Frontend
57mTypeScript for React developers
01h 25mWorkshop: TypeScript Plus React = Love
52mTypescript Deep Dive