ReactJS is a popular JavaScript library for building user interfaces recently, due to its simplicity and flexibility. However, as your project grows, maintaining a large codebase can become challenging, leading to potential bugs and inefficiencies. One way to address this issue is by converting your ReactJS application to a TypeScript one. TypeScript adds static typing to JavaScript, providing a robust and scalable solution for managing complex projects. In this article, I'll walk you through the process of converting your ReactJS application to TypeScript.

Step One:

The first step in the conversion process is to install TypeScript. You can do this using npm or yarn. Remember to run this in the root of your project.

npm install typescript --save-dev
# or
yarn add typescript --dev

This should add Typescript as a development dependency in your project.

Step Two:

Next you need to create a "tsconfig.json" file in your project's root directory.
This file specifies the Typescript compiler settings for your project. Generating a basic tsconfig.json file can be done using the following command:

npx tsc --init

Step Three:

Rename all your .jsx files to .tsx This is how typescript files are recognized.

Step Four:

Annotate your components with Types and the proper syntax.
Let's take for example, we have a simple button component rendered through the main App with some prop passed through it:

//App.jsx
import { useState } from 'react'
import './App.css'
import Button from './Button';

function App() {
  const [count, setCount] = useState(0);
  const increment =()=>{
    setCount((count)=>count + 1)
  }
  return (
    <>
      <div className="card">
        <Button increment={increment} text="Click me"/>
        Your count is { count }
      </div>
    </>
  )
}

export default App

Then for the Button component:

//Button.jsx
import React from "react"

const Button = ({increment, text }) => {
  return (
    <div>
      <button onClick={increment} >{ text }</button>
    </div>
  )
};

export default Button;

This , simply put, is button which updates a count on every click.

Converting to typescript by adding annotation and types, we add the type annotations in the Button component ( After changing both files to .tsx):

//Button.tsx
import React, { MouseEventHandler } from "react";

type Props = {
    increment:MouseEventHandler,
    text:any,
}

const Button =({increment, text}:Props)=>{
    return(
        <div>
            <button onClick={increment}>{text}</button>
        </div>
    )
};

export default Button;

Great! After doing this, confirm to check if your app is still running.If it works, then you're good. Typescript has strict rules so if there is an errror anywhere in syntax which would be detected by react-scripts, it won't run at all.

Now we are done! You have successfully migrated your work to Typescript. For further security checks you could tighten the strictness of your tsconfig.json file. You could find out more compiler options here .

Conclusion

In this article, we've covered the essential steps to convert your ReactJS application to TypeScript. By adding static typing to your codebase, you'll improve code quality, catch potential bugs early, and enhance collaboration within your development team. Note that this is not the only method of converting your Reactjs applications to Typescript, but it is what works for me.

Happy Coding!