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.
- Install the required package using