As a developer, you will almost certainly have to work with Javascript at some point in your career, regardless of whether you're a front-end or back-end engineer. Sometimes it can be tiring to work with Javascript due to runtime errors when it comes to type checking, which is why Typescript, a superset of Javascript that extends Javascript, was introduced.
It allows for type checking before runtime, improves the productivity of developing complex applications, and reduces type errors drastically before production.
In this article, as a beginner familiar with React JS, you will learn how to create your first typescript project using the Visual Studio code editor or any other editor you choose.
Prerequisites
Vscode editor Installed (or any other preferable editor).
Node installed on your device.
Basic understanding of ReactJs.
Why I chose Typescript
"Hi Aisha, we will be using Typescript in our next project."
This was the message I received from my colleague recently. Let me introduce myself. My name is Aisha, and I am a front-end developer who uses JavaScript and is now going to work with Typescript. Who am I to say no when it involves learning new things?
Before my colleague informed me of it, I had already heard about Typescript on the internet, but I never gave it a shot or a second glance. Some developers believe it is superior to Javascript, while others believe vice-versa. However, I conducted my research, but first, let us define Typescript.
What is Typescript?
Typescript, according to its official documentation page, is a superset of Javascript. According to our high school mathematics knowledge of SETS, set A is a superset if it contains all of the elements of set B. Relating this to the definition of Typescript above, this means that Typescript contains all elements of Javascript.
However, Typescript is a statically typed language compared to Javascript, meaning you must explicitly indicate its value type. It is a more readable version of Javascript thanks to type-checking and intuitive compilation. Typescript adds syntax rules about how to use different values, which aid in type error checking before execution.
Setting up a new Typescript project using react
If you've used reactJs libraries to build Javascript projects in the past, you might wonder if there's a different way to build Typescript projects with the same library. No need to worry because in this section, you will learn how to create a Typescript from scratch using the React library.
Steps to set up a Typescript project
Open your editor and navigate to the terminal.
Cd into the desktop and make a new directory on the desktop and name it Typescript-project-tutorial.
Cd into the new directory created on the desktop.
Create a new Typescript project using react by adding
--template typescript.After Installation, you get the folder structure below, including a Typescript config file.
Now that you've successfully started a Typescript project with the Reactjs library, you can remove unnecessary files and rearrange your project directories anyhow you want it.
Conclusion
In this article, you learned what Typescript is and how to create a Typescript project using the ReactJs library. For further understanding of Typescript, you can check out the following resources.
Resources
Thank you for sticking with me this far. You can connect with me on Twitter | Github| and LinkedIn
See you in my next article! cheers.