Basics Of TypeScipt

Introduction to TypeScript

TypeScript is a language that is a superset of JavaScript.

TypeScript can be used where you want to write JavaScript.
When compiled, it generates JavaScript.
TypeScript provides a compile-time environment that JavaScript lacks. This means we get fewer exceptions or bugs while working with TypeScript over JavaScript.

ECMAScript 6 is also called as ES6 or ECMAScript 2015 or JavaScript 6. TypeScript is an extension of ES6.

We can say JS (parent) >> ES6 (child of JS -->TS (child of ES6||JS6).

In this article, we will learn some of the basics of TypeScipt, from installation to getting started with TypeScipt.

So, let's start.

Installation of TypeScipt

Step 1

Install node.js from https://nodejs.org/en/download/. Node basically provides a server-side environment. By installing a node, we will get the Node Package Manager (NPM).

NPM helps us to install packages. An NPM package is basically a JavaScript file library that can be used in our project.

If you want to know if the node is installed or not on your system, then open your CMD and type the following command.

C:\Users\AM\Desktop\TypeScript>node

If you want to know the version of the node installed, then execute the following command.

C:\Users\AM\Desktop\TypeScript>node -v

v10.15.1</code>

Step 2

Now, it's time to install TypeScript.

C:\Users\AM\Desktop\TypeScript>npm install -g typescript

The above command will install the latest version of TS at a global level. If you want to install it locally (i.e for folder only), don't use -g. To install an older version, use the following syntax.

C:\Users\AM\Desktop\TypeScript>npm install -g [email protected]

To know the TypeScript version, use the following command.

C:\Users\AM\Desktop\TypeScript>tsc -version

Version 3.3.3333

Step 3

We need some editor to write our code. Here, I am recommending to use the Visual Studio Code.

How TypeScript makes life easier?

Let's understand this with an example. Here, we have a JavaScript file.

practis.js

function division(a, b) {
return a > b;
}
console.log(division(2, 1));

Output

C:\Users\AM\Desktop\TypeScript>node practis.js

true

In the above example, we have written a simple JavaScript function which accepts two parameters, compares these, and returns the result. Here we have passed two numbers. Let's see what happens when we pass a different type of parameter.

function division(a, b) {
return a > b;
}
console.log(division(2, "1"));

O/P

C:\Users\AM\Desktop\TypeScript>node practis.js

true

When we pass one number and another string, it also compares them and the result is true. This is wrong! We can't compare a number with a string. In JavaScript, we can't specify the data type of parameters. But in TypeScript, you can specify the type of argument you want to accept. Let's see an example of the TypeScript file.

practice.ts

In the above example, we have written a function that will accept two parameters, both of type number. If you try to pass a string, it will throw an error.

We are all set. Let's start with TypeScript programming.

practis.ts

let a = "Welcome to JustCompile"
console.log(a);

We have initialized one variable which stores a string value. The next line prints the value of the variable. Save the file with .ts extension.

Run that file with the following command.

tsc practis.ts

After compilation, we will get a new JavaScript file, i.e., practis.js

Here is the generated js file.

practis.js

var a = "Welcome to JustCompile";
console.log(a);

Now, we have to execute this JS file with the following syntax.

node practis.js

Output

Welcome to JustCompile.

That's it.

I hope you have understood the basic difference between JavaScript and TypeScript, and how TypeScript gives us more advantages.