TypeScript with ReactJs

TypeScript with ReactJs

21 July 2021

Why TypeScript? Benefits of TypeScript

The top main reasons for Typescript is below:

  • Superset of Javascript, easy to learn.
  • Supports Class and Modules: Keywords like Class, Module, extends and interface are used.
  • The compiler has the support to check for the type of the variable ( Static Type Checking).
  • Supports latest ECMAScript along with different language support. The typescript compiler can compile the “.ts” file into “ES6” or other versions.
  • Support Javascript package in-build.
  • The syntax is more familiar with Java and Scala, which is used as a back-end language.

Setup of React app with Typescript

  • Create React app along with “–typescript” keyword.
    • npx create-react-app todo-app –typescript
  • For any React app which is already existing, install Typescript and other required types.
    • npm install –save typescript @types/node @types/react @types/react-dom
    • Rename all the existing file extensions to “.ts” or “.tsx”.
    • Restart the server.
  • Using webpack to create react app and then install typescript.
    • Install the required package using
      • npm install –save-dev typescript awesome-typescript-loader
    • Updated the webpack configuration to let know the file extension “.ts” or “.tsx”. Also. the loader responsible for these file formats.
    • Lastly, in the root of the file add a typescript configuration file.
    • Restart the server, all set to go with Typescript.

Request a quote