Refactor a React Component using TypeScript

Share this video with your friends

Send Tweet

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.

Simon Vrachliotis
Simon Vrachliotis
~ 2 years ago

I finally know what React.VFC means ๐Ÿ˜… Thank you Chance! ๐ŸŽ‰

Juan Marco
Juan Marco
~ 10 months ago

Update: VoidFunctionComponent is now equivalent with FunctionComponent. Details here.