Building Considerate React Component APIs with TypeScript
summary
TypeScript gets used as a communication tool, not just a bug checker: prop names get clearer (rename input1 to headerText), loose types become specific (array of {label,value}), string literal unions enforce 'small'|'medium'|'large', Partial is swapped for Omit so size is prohibited, and the Select moves from string|number unions to a generic T so selected value always matches input. The result: the wireframe features land in code and the pages render as intended.
AI-written summary · about
chapters (10)
- 0:00Considerate React component APIs
- 4:16Hoisting context into props
- 7:49TypeScript as communication tool
- 11:21Testing component APIs
- 13:49String literal unions for props
- 17:57Replacing partial with omit
- 21:28Generics for consistent types
- 24:38Advanced TypeScript types
- 26:00Why considerate APIs matter
- 27:45Closing & Q&A
related talks
49mTypescript + React
23mTypeScript + React = ❤️
37mBuilding Better Components — A Journey to a More Resilient Frontend
18mTypeScript Patterns For Better React Components
27mLearning TypeScript in React during year one
15mTypeScript Patterns for Better React Components
42mTypeScript Patterns for Better React Components
21mHow Typescript Can Power Design Systems