Typescript & React: Manipulating Prop Types

How to use Extend and Pick helpers with generic types, intersection types, and more

This talk tackles how we can handle React prop manipulation in a type-safe way, unveiling some of the more advanced features of Typescript and ensuring that your components — whether ordinary or extended via higher-order components — are fully type safe. Specifically, we will explore:

• Conventional syntax for extending and manipulating props and prop types, giving you more modularity and flexibility typing React components
• Visiting a means of removing unwanted props via utility functions and HOCs, utilising the Exclude and Pick helper types to remove type properties we don’t require. As well as conforming types to your props, this also ensures that already-defined props are not overwritten as they travel down your component tree
• How generics are used to abstract and manipulate prop types

By the end of this talk you will be equipped with the tools for writing scalable and type-safe prop types within your React projects. Let’s start by reviewing how to format and extend prop types.

Extending prop types