Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TypeScript Patterns for Better React Components

TypeScript Patterns for Better React Components

Have you ever tried building fully-typed polymorphic components? Good! Now how about combining that with discriminated unions, enhanced HTML attribute types and a forwardRef wrapper? Exactly — it's not easy. In this talk, we'll walk you through several TypeScript patterns you'll face over and over again. From building simple but 100% type-safe component props, constructing compound vs. polymorphic components, to function overload components, discriminated union props, generic React components and augmented components wrapped in forwardRef and more. Join this session and bring your typing skills to the next level!

Glenn Reyes

October 06, 2023
Tweet

More Decks by Glenn Reyes

Other Decks in Programming

Transcript

  1. Glenn Reyes @glnnrys · glennreyes.com Software Engineer, Tech Speaker &

    Workshop Instructor Head of Developer Relations @ Kadena
  2. Marmelade NFT standard at Kadena Kadena The only PoW blockchain

    that scales Chainweb A scalable PoW consensus algorithm Remote first & distributed Founded by Stuart Popejoy & Will Martino kadena.js github.com/kadena-community/kadena.js ~ 30 developers in DX team ~ 70 employees Pact The human-readable smart contract language
  3. @glnnrys Comparison boolean vs. union vs. custom <Button disabled />

    <Button variant="destructive" /> <Alert variant={AlertType.Warning} /> <SubmitButton /> <SubmitButton />
  4. @glnnrys Custom component In comparison to boolean vs. union <SubmitButton

    /> Predefined logic built-in to the component ‣ Button is tightly integrated with form context ‣ loading and disabled state coming from a form library Appearance identical to the primitive
  5. @glnnrys Compound and Polymorphic Components A comparison vs. Customization to

    the icon is managed by the DownloadIcon component itself → Flexibility Customization to the icon is managed by the Icon primitive → Consistency
  6. @glnnrys Glenn Reyes, @glnnrys “Using TypeScript is most fun when

    the amount of possibilities of errors and edge cases are zero or close to zero.”