Convert a React Component to TypeScript

React 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 .js or .jsx to .tsx

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

Header.jsx -> Header.tsx

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

React.FC 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 type.

3. Refactor your defaultProps to use ES6 default values

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

C3PO dancing