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:

import React from 'react'

export const Header = ({text, color}) => {
  return <h1 style={{ color }}>{text}</h1>
}

Header.defaultProps = {
  color: 'red',
  text: 'Hello world!'
} 

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

import React from 'react'

type Props = {
  text: string;
  color: string;
}

export const Header: React.FC<Props> = ({text, color}) => {
  return <h1 style={{ color }}>{text}</h1>
}

Header.defaultProps = {
  color: 'red',
  text: 'Hello world!'
}  

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 atype.

3. Refactor your defaultProps to use ES6 default values

import React from 'react'

type Props = {
  text: string;
  color: string;
}

export const Header: React.FC<Props> = ({text = 'Hello world!', color = 'red'}) => {
  return <h1 style={{ color }}>{text}</h1>
}

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