e.preventDefault(); // Prevent form submission input.blur(); // remove focus input.value = ""; // optional: clear the input

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.

Related Posts

Latest Posts

  • All Posts
  • Generative AI
  • manufacturing
  • News
  • Portfolio
    •   Back
    • Android
    • iOS
    • Java
    • PHP
    • MEAN
    • Ruby
    • DotNet
    • IoT
    • Cloud
    • Testing
    • Roku
    • CMS
    • Python

India

Plot No. 11/2, Phase 3, Hinjewadi Rajiv Gandhi Infotech Park, Pune, India – 411057.
info@tudip.com
+91-96-8990-0537

United States

1999 S. Bascom Ave Suite 700, Campbell CA. 95008, USA.
info@tudip.com
+1-408-216-8162

Canada

64 Caracas Road North York, Toronto Ontario M2K 1B1, Canada.
info@tudip.com

Mexico

Calle Amado Nervo #785 Interior B Colonia Ladron De Guevara 44600 Guadalajara, Jalisco, Mexico.
info@tudip.com

Colombia

Cra. 9 # 113-53 Of. 1405 Bogotá D.C., Colombia.
info@tudip.com

UAE

Tudip Information Technologies L.L.C Office No 109, ABU HAIL BUILDING 13, Abu Hail, Dubai, UAE.
info@tudip.com

Nigeria

22 Kumasi Crescent, Wuse 2, Abuja, Nigeria.
info@tudip.com