Building Considerate React Component APIs with TypeScript

on YouTube ↗28m

" summary

A small web app called Barkpark gets ported to TypeScript and component APIs get tightened: vague props like input1 become explicit headerText/bodyText, selects move from any to typed option objects then to a generic T so value types stay consistent, sizes use string literal union for IDE autocomplete, and an erroneous Partial is replaced with omit to prevent misleading props. The wireframe lands and the component APIs prove easier to use and safer.

AI-written summary · about

" chapters (5)

1. 0:00Introduction
2. 0:37Introducing Barkpark
3. 2:20Onboarding
4. 8:06Conversion
5. 20:20Union Type

" related talks

• 37mBuilding Better Components — A Journey to a More Resilient FrontendDaniel Yuschick · Build Stuff 2024
• 49mTypescript + ReactBen Ilegbodu · Connect.Tech 2022
• 23mTypeScript + React = ❤️Ben Ilegbodu · React Summit 2020
• 42mTypeScript Patterns for Better React ComponentsGlenn Reyes · Øredev 2023
• 18mTypeScript Patterns For Better React ComponentsGlenn Reyes · React Brussels 2023
• 27mLearning TypeScript in React during year oneAnna Carey · React Day New York 2021
• 35m팀장님 우린 내일부터 React+ TypeScript로 갑니다Park Yejun · FEConf 2019
• 01h 25mWorkshop: TypeScript Plus React = LoveBen Ilegbodu · TSConf 2020