The aim of this tutorial is to teach you the steps you need to consider when converting a react application written in Javascript into a react application that supports Typescript. The aim of this tutorial is not to go into the pros & cons. This guide will be a non-nonsense demonstration of the files you will need to update the config that you may need to apply. To get started you typescript needs to be installed:

Next, add a 'tsconfig.json'. This file will configure how typescript behaves. If you want the application to run both Javascript and Typescript, you need to set 'allowJs=true'. You will also need to set 'jsx=react'.

If you are using web-pack you will need to provide typescript file extension support:

Linting

When adding typescript you may also want to add support for linting and code formatting. If you use lint-staged, prettier and eslint then you will need to add some more specific config:

If you use 'prettier' and 'lint-staged' you will need to add some config within 'package.json', like this:

Eslint

If you use 'eslint' within the '.eslintrc' file you need to add typescript file extension support:

After you have the correct config the steps to convert a component is:

  1. Rename a component from a file extension from 'js' to 'tsx'
  2. If the component has a corresponding test, rename the test files extension from 'js' to 'ts'
  3. Within the component, remove any prop-types, etc..
  4. Create an interface for the components
  5. Implement the interface on the class

To implement an interface on a functional component:

To implement an interface on a class component - convert it to a functional - you can:

Enjoy!