Course lesson

Refactor a React Component using TypeScript

We are going to start refactoring our CountDisplay component. It is a small stateless component but it has a few props that can benefit from type safety.

Duration
4 min
Access
Included
Transcript
Retained from source evidence

We are going to start refactoring our CountDisplay component. It is a small stateless component but it has a few props that can benefit from type safety.

There are three ways to type a component, inline, alias, and as a function expression. The inline typing adds a bit of noise to our code and can make it difficult to parse right out of the gate. To fix this, we use a type alias that reads a little bit nicer. To add in a function expression, which we get from the React Types that we downloaded, we can declare this variable to have a type of React.FunctionComponent which takes as a type argument, our props.