TypeScript with ReactJs

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.