TypeScript Patterns for Better React Components
summary
Explains concrete TypeScript solutions for React: use discriminated unions or string literal unions instead of Boolean props, prefer string literals over enums to avoid runtime bloat, and prefer ComponentProps/JSXIntrinsic for accurate HTML attributes. Shows polymorphic components typed with React.createElement, Compound components via React.cloneElement, and a forwardRef augmentation using higher‑order type inference. Covers createContext nullable unions, overloads for variant props, prefers interfaces for editor speed, recommends return annotations, and runtime validation with Zod.
AI-written summary · about
chapters (11)
- 0:00Introduction to TypeScript in React
- 1:25Boolean Props vs Variants
- 3:48Enhancing Components with HTML Types
- 5:55Compound vs Polymorphic Components
- 7:20Typing React Forward Refs
- 8:25Context with and without Values
- 9:50Overload Function Components
- 11:15Type vs Interface Performance
- 12:43Deprecating Props and Types
- 14:30Handling TypeScript Errors
- 14:50Why TypeScript Matters
related talks
18mTypeScript Patterns For Better React Components
42mTypeScript Patterns for Better React Components
49mTypescript + React
23mTypeScript + React = ❤️
52mTypescript Deep Dive
37mBuilding Better Components — A Journey to a More Resilient Frontend
28mBuilding Considerate React Component APIs with TypeScript
57mTypeScript for React developers