TypeScript Patterns for Better React Components

@glnnrys · glennreyes.com TypeScript Patterns for Better React Components

Glenn Reyes @glnnrys · glennreyes.com Software Engineer, Tech Speaker &
Workshop Instructor Head of Developer Relations @ Kadena

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

@glnnrys React

@glnnrys Typing in React

@glnnrys History of typing in React

@glnnrys History of typing in React ❓

@glnnrys History of typing in React 🤖

@glnnrys From the beginning …

@glnnrys TypeScript has been tightly integrated with Angular and Vue

@glnnrys But not with React 🫠

@glnnrys Today, TypeScript is not tightly integrated with React.

@glnnrys

@glnnrys DefinitelyTyped on GitHub TypeScript types for React are purely
driven by the community.

@glnnrys @types/react @types/react-dom

@glnnrys Patterns

@glnnrys Boolean props

@glnnrys Boolean props <Button disabled />

@glnnrys Boolean props <Button primary />

@glnnrys Boolean props <Button primary secondary />

@glnnrys Boolean props

@glnnrys String literal union type prop

@glnnrys String literal unions vs. enums

@glnnrys String literal unions vs. enums Differences ‣ Distinct types

@glnnrys String literal unions vs. enums

@glnnrys String literal unions vs. enums Differences ‣ Runtime overhead
with enum →

@glnnrys String literal unions vs. enums Differences ‣ Runtime overhead
with string literal unions →

@glnnrys Comparison boolean vs. union <Button disabled /> <Button variant="destructive"
/> <Alert variant={AlertType.Warning} />

@glnnrys Comparison boolean vs. union vs. custom <Button disabled />
<Button variant="destructive" /> <Alert variant={AlertType.Warning} /> <SubmitButton /> <SubmitButton />

@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

@glnnrys Components with HTML element attribute

@glnnrys

@glnnrys Components with HTML element attributes ‣ React.HTMLAttributes does not
include enough types

@glnnrys Components with HTML element attributes ‣ React.HTMLProps uses AllHTMLAttributes
→ inaccurate types

@glnnrys Components with HTML element attributes ‣ JSX.IntrinsicElements errors when
inlined

@glnnrys Components with HTML element attributes • Workaround: JSX.IntrinsicElements wrapped
in NonNullable ↓

@glnnrys Components with HTML element attributes React.ButtonHTMLAttributes<HTMLButtonElement>

@glnnrys Components with HTML element attributes

@glnnrys React.FunctionComponent

@glnnrys React.FunctionComponent Definition (since React 18 ) Usage

@glnnrys React Server Components

@glnnrys React Server Components Async React components are supported since
TypeScript 5.1 🚀

@glnnrys Reusing types and interfaces

@glnnrys Reusing types and interfaces vs.

@glnnrys Prefer reusability and keep simplicity on a case-by-case basis.

@glnnrys Compound and Polymorphic Components A comparison vs.

@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

@glnnrys Compound Components asChild from radix

@glnnrys Polymorphic Components <Button as={Link} /> <Button as=“link” />

@glnnrys Polymorphic Components

@glnnrys Generic Components

@glnnrys React.forwardRef

@glnnrys React.forwardRef ?

@glnnrys React.forwardRef

@glnnrys React.Context

@glnnrys React.Context With default values

@glnnrys React.Context Without default values

@glnnrys Overload function components

@glnnrys type vs. interface

@glnnrys type vs. interface type interface

@glnnrys Reduced computational work By using interface.

@glnnrys Prefer interface for faster TS compilation in your editor.

@glnnrys Encourage type annotations. Especially function return types, for faster
compilation

@glnnrys

@glnnrys Commenting types is very encouraged.

@glnnrys Commenting types dayjs Example

@glnnrys any

@glnnrys It’s your friend, but it’s also not. any

@glnnrys Run time parsing

@glnnrys any, as and !

@glnnrys Avoid them all. any, as and !

@glnnrys any, as and ! Type narrowing with type guards

@glnnrys any, as and ! Runtime parsing

@glnnrys Tooling

@glnnrys Great tooling keeps your codebase clean without the hassle.

type-fest Tooling ts-pattern esbuild tsx (formerly esno) ts-reset Improved built-in
typings bun typescript-eslint eslint-config-banana

@glnnrys Configuration

@glnnrys

@glnnrys One last thing before we wrap up …

@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.”

Thank You! @glnnrys · glennreyes.com

TypeScript Patterns for Better React Components

TypeScript Patterns for Better React Components

More Decks by Glenn Reyes

Other Decks in Programming

Featured

Transcript