Why should you use Typescript in React App ?

TypeScript is a popular superset of JavaScript that adds optional static typing to the language. When building a React application, using TypeScript can bring a number of benefits, making development process more robust and efficient.

type User = {
    name: string,
    age: number,
    email: string
};

function getUser(user: User): User {
    return user;
}

const user: User = {
    name: 'John Doe',
    age: 35,
    email: 'johndoe@example.com'
};

const returnedUser = getUser(user);

console.log(returnedUser);

One of the main benefits of using TypeScript in a React application is improved code quality. The static typing in TypeScript allows developers to catch errors early on, while they're still working on the code. For example, if a developer accidentally assigns the wrong data type to a variable, TypeScript will catch that error and alert the developer right away. This can save a lot of time and effort in the long run, as it reduces the number of bugs that will need to be fixed later on.

import React, { FC } from 'react';

interface Props {
  name: string;
  message: string;
}

const ExampleComponent: FC<Props> = ({ name, message }) => {
  return (
    <div>
      <h1>Bonjour, {name}!</h1>
      <p>{message}</p>
    </div>
  );
};

export default ExampleComponent;

Another benefit of TypeScript is improved developer productivity. TypeScript's type checking and IntelliSense features provide a better development experience, as it makes it easier for developers to understand the codebase and navigate through it. It also provides support for things like code refactoring, which can save a lot of time during development.

TypeScript also brings better scalability to your application. With the help of TypeScript, the codebase will be more maintainable and less prone to errors, as it makes it much easier to identify and fix bugs. It also makes it easier for new developers to understand the codebase and get up to speed with the project.

TypeScript also allows you to use the latest JavaScript features such as ES6/ES7/ES8/ES9/ES10 with its support to JS version. It also allows you to use JSX syntax in your codebase. This means that you can take advantage of the latest language features, without having to wait for them to be fully supported by all browsers.

Additionally, TypeScript is widely adopted and supported by various javascript libraries and frameworks such as React, Angular, NestJS, etc. This means that you'll have access to a wide range of third-party libraries and resources, making it easier to work with those libraries, and leverage existing community knowledge.

import React from 'react';
import { NextPage } from 'next';

enum Status {
  PENDING = 'PENDING',
  SUCCESS = 'SUCCESS',
  ERROR = 'ERROR'
}

interface Props {
  status: Status;
  message: string;
}

const StatusComponent: NextPage<Props> = ({ status, message }) => {
  let className, text;
  switch (status) {
    case Status.PENDING:
      className = 'pending';
      text = 'Loading...';
      break;
    case Status.SUCCESS:
      className = 'success';
      text = message;
      break;
    case Status.ERROR:
      className = 'error';
      text = message;
      break;
    default:
      className = '';
      text = '';
  }

  return (
    <div className={`status ${className}`}>
      {text}
    </div>
  );
};

export default StatusComponent;

In conclusion, TypeScript is a powerful tool that can bring a number of benefits to a React application. It improves code quality, developer productivity, scalability, and allows you to take advantage of the latest JavaScript features. It is also widely adopted and supported by various libraries and frameworks. If you want to create a more robust and maintainable React application, consider using TypeScript.