Typescript: Introduction

In this article, we are going learn about What is Typescript? What does it do? Installation process. After reading this article you will have a little bit idea of what is Typescript.

This is going to be a full series of typescript where you will learn from basic topics like string, boolean to more complex like Type Aliases, enums, Interface, generics, and etc.

Table of Contents

• What is Typescript?
• What does typescript do?
  • How does Development Process work?
• Install Typescript
  • Global Installation
  • TypeScript in Your Project

What is Typescript?

TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor. Catch errors early in your editor. TypeScript code converts to JavaScript, which runs anywhere JavaScript runs: In a browser, on Node.js or Deno, and in your apps. TypeScript understands JavaScript and uses type inference to give you great tooling without additional code.

• Typescript is a superset of JavaScript.
• TypeScript provides various other features, like interfaces, type aliases, abstract classes, function overloading, tuple, generics, etc.
• It allows you to code in a manner so that your code faces much less error in the run time or production.

Don't use typescript if your project is small. You need to use the superpower of the typescript if you are using it to make your code bug and error-free. It's all about the Type safety.

> 2 + "2"
> '22' // ans

> null + 2
> 2

> undefined + 2
> NaN

This should not be done as it makes the issue bigger.

What does typescript do?

It does static checking - whenever you are writing the code, then the code is constantly monitored by IDE to check if you are making any syntax error or something but not in JS. Whatever you write, it's ok.

But when you run the code in your environment, then it throws the error. It would be very helpful to get the idea of whether what you are doing is correct or not as you write the code.

Analyze the code as we type. That's it.

How does Development Process work?

You write all your code in TS format and that code is converted to JavaScript. TS is a development tool and your project still run JS as the browser doesn't understand Typescript.

That's why when you install the TS package then you download it as a dev dependency.

TS Playground: Here you can play with typescript and check how it is converted.

let car = {
  module: "xyz",
  color: "red",
};

// ❌ ERROR: Property 'price' does not exist on type '{ module: string; color: string; }'.
car.price;

As the above code shows in the example we are trying to get the price which does not exist in the object and it shows the error before running the code.

let num1 =  2;
let num2 =  "2"

// 👇 It works but shouldn't be done right?
let sum = num1 + num2; // "22"

The above code does not show any kind of error and when you run it will show you the result as 22 which we don't want. It is allowed, but we can bypass that by defining each variable as a type. We will look at the in later in this article.

Install Typescript

There are two different installations for the project you can use-

Global Installation

In this, you install the Typescript as the global package. you can do that by simply running the following command in your terminal window-

npm install -g typescript

TypeScript in Your Project

When you install typescript for your projects such as for React or Angular then their typescript config file is required what kind of setting you want or not. Use the following command to install the typescript to your project-

npm install typescript --save-dev

For more info visit here

Wrapping up

In this article I explained what Typescript is and how it works and how you can install it in your system.

This is a series of Typescript that will help you to learn Typescript from the scratch. If you enjoyed this article, then don't forget to give ❤️ and Bookmark 🏷️for later use and if you have any questions or feedback then don't hesitate to drop them in the comments below. I'll see in the next one.

Connect with me

Twitter	GitHub	LinkedIn	Instagram	Website	Newsletter	Support