How to create React app with TypeScript?

Hey reader! In this article, we will look at how to integrate typescript in a react application, you all are thinking why do we want to create react app with typescript?🤔 So to answer your question let’s first understand what is typescript anyway?

Typescript

Typescript is a new modern-age JavaScript development language. It extends Javascript to make it a stronger type of language, and in doing so it will help you catch errors and help you find fixes before you run your code. Typescript checks your code in a compile time and this makes it a more type-safety language. It works anywhere where the javascript is available.

We have to define each variable behavior by giving them their type, suppose in javascript I am writing like this

const nname = "codedamn"
Code language: JavaScript (javascript)

This will work fine but if I change the value and give it a number or boolean it will work perfectly.

const name = 12
Code language: JavaScript (javascript)

Now by defining the variable type if I try to change the value and give it a number or something else other than a string. It gives you an error.

This approach is always good to have because by defining the variable or function type it is easy to maintain the code workflow policy and it also doesn’t break any code due to entering bogus values.

const name:string = "codedamn"
Code language: JavaScript (javascript)

Typescript provides all the type-safety features that you can use to make your program a bit more implicit.

Getting Started

Let’s get started in creating react app already with typescript by default. Configuring typescript applications is a little bit complicated, especially the first time you are dealing with typescript. Don’t worry I am here to simplify and make your development journey a little hassle-free.

In this article, we will be using Codedamn Playground and I’ll also show you in Visual Studio Code editor, how to create a react-based typescript application.

Codedamn Playground

Codedamn provides you with an interactive web-based free in-browser IDE environment where you can code and run your application anywhere without worrying about any software installation and setup. It works flawlessly on any laptop and it doesn’t require a heavy processor to run your application. You can manage your code workflow from anywhere and anytime.

Creating react app with typescript is simply very easy in the codedamn playground. Follow the below-mentioned steps to create one.

• Open Playground and click on From Github tab

• Copy this link https://github.com/codedamn-classrooms/react-vite-typescript and paste it into the Repo Url section.

• Don’t forget to give a nice name to your playground in the Playground Title section and click on Create Playground

• Voila! Your react-based typescript application is ready 🎉🎉

Codedamn Playground makes it easier to set up the application environment.

Visual Studio Code

Steps to Follow

Step 1– Go to nodejs.org and download nodejs you going to need that for npm to install your packages.

Step 2 – Open vscode and create one folder where we will install our react-based typescript application.

Step 3 – Open the terminal and verify that you are in the right folder that you created in the above step.

Step 4 – Type the command mentioned below to create your react-based typescript application. This might take a couple of minutes for installing all the packages on the meantime go check out Codedamn Platform 😎

npx create-react-app codedamn --template typescript
Code language: JavaScript (javascript)

Step 5– Go to the folder directory using the cd command and type npm start this will initialize your application.

Step 6– Delete the unnecessary files for now and keep them as shown in the image. Congrats you have successfully created react app with typescript. 🎉

Conclusion

Using Typescript provides many cool features and it also organizes the code structure better, you should use typescript in your program or application to make it more type safety because using typescript the benefit way more than the cost of the time for defining the types of each function and variable and also the learning curve which is not big if you know javascript or event react already. Try to use typescript and learn more about it. Have great learning!🤗