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:
- 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. 🎉