Convert a React Component to TypeScript

Converting a React component to TypeScript can be broken down in a few steps. Let’s walk through it together! Here’s the file we’ll use for our example:

1. Rename your file from or to

This tells React and TypeScript that this is a TypeScript/JSX file.


2. Add a return type annotation and a type for your props

stands for “Functional Component”. The is called a “generic” and it takes the interface/type for our component props. We define our props using a.

3. Refactor your to use ES6 default values

Boom! You’re all done. Give yourself a pat on the back and dance. 🎉

More about:

Joe Previte