Gain insights into building strongly typed polymorphic React components using TypeScript. Learn about naive implementations, advanced use cases, and creating reusable utilities for design systems.

data.tar.gz

chakra-ui-polymorphic-example

material-ui-polymorphic-example

basic-polymorphic-example

basic-polymorphic-ts-example

border-exercise

TypeScript has become the de facto way to build modern web applications. With the rise of design systems and reusable components, building strongly typed polymorphic components is a desirable skill for the modern web engineer. 

This course provides a bottom-up approach to building strongly typed polymorphic components. You will start with a naive implementation of a polymorphic component and explore its drawbacks. You will then use TypeScript to provide a production-ready component interface. Finally, you’ll support advanced use cases with component refs and build a reusable utility you can use on multiple components. 

By the end of the course, you’ll be ready to build components fit for a design system and go beyond basic reusable needs.

Using TypeScript for Building Polymorphic React Components

To be reused on different React components

What is the primary purpose of creating a reusable polymorphic utility type? 

What is the primary purpose of creating a reusable polymorphic utility type?

When building a reusable utility, how would you accept varying types as arguments? 

When building a reusable utility, how would you accept varying types as arguments?

No, a reusable type cannot accept multiple generic arguments. 

Yes, there are no restrictions to the number of generics a type can accept. 

Can a reusable utility type accept more than one generic? 

Can a reusable utility type accept more than one generic?

By relying on TypeScript's default type inference

By using the `Omit` utility to remove specific types present in our component props from `React.ComponentPropsWithoutRef`

In our reusable utility implementation, how did we prevent multiple type definitions from `React.ComponentPropsWithoutRef` and our component props? 

In our reusable utility implementation, how did we prevent multiple type definitions from <code>React.ComponentPropsWithoutRef</code> and our component props?

It is a type that extends the props interface with a `children` prop.

It is a type that extends the props interface with multiple `children` props.

It is a type that specifies the props of a React component.

It is a type guard for the component types.

What does the `PropsWithChildren` type do? 

What does the <code>PropsWithChildren</code> type do?

Take a quiz on building a reusable polymorphic utility type.


Introduction

Strongly Typed Polymorphic Components

Build a Reusable Polymorphic Type Utility

Polymorphic Component with Ref Support

Exercise and Conclusion

Quiz