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.