You are using an older browser that might negatively affect how this site is displayed. Please update to a modern browser to have a better experience. Sorry for the inconvenience!

Introduction to TypeScript


During the frontend development, the main thing that strikes a chord is key terms, for example, HTML, CSS, and JavaScript—browser, standard approaches to show, style, and content the page. Yet, we go a little deeper, will undoubtedly go over drifting trendy programs like React, Angular, or TypeScript.

Hold up a moment… TypeScript? For what reason would anybody need or need another “script?

What Is TypeScript?

TypeScript is an open-source programming language created and well maintained up by Microsoft. It is a superset of JavaScript and adds discretionary static- typing to the language.

In this article, you will learn

  • TypeScript Installation
  • TypeScript History
  • TypeScript vs JavaScript
  • Few highlights of TypeScript

How to Download and Install TypeScript:

Go to the official site of nodejs : https://nodejs.org/en/download/ and download and install nodejs as per your operating system.

To check if nodejs and npm are installed in windows, just check the version in your command prompt.

D:\typeproject>node –version 12.13.1

D:\typeproject>npm –version 6.12.1

So you have nodejs 12.13.1  and npm 6.12.1installed.

Typescript Installation

Create your project directory typeproject/ and run npm init, as shown in the command below:

npm init

This will create package.json which will have the store the dependencies for our project.

Once done, install typescript as follows:

npm -g install

The above command will take care of installing typescript. Adding “-g” to npm install will install typescript globally. The advantage of using -g is that you will be able to use typescript tsc command from any directory as it is installed globally. In case you don’t want to install typescript globally use below command:

npm –save install typescript

Create an src/ folder in your project directory and src/ folder create typescript file test.ts and write your code. For example:

Example : test.ts

function add(x:number, y:number) {

return x+y;

}

let sum = add(5,10);

console.log(sum);

Typescript History

Let see the important landmarks from the history of Typescript:

  • After a long two years of internal improvement at Microsoft. TypeScript 0.9, was released in 2013
  • TypeScript 1.o was released at Build 2014 with additional support for generics.
  • In July 2014, another TypeScript compiler came which is multiple times quicker than it’s the past variant.
  • In July 2015, support for ES6 modules, of support, namespace, for, keyword, decorators.
  • In November 2016, an additional component like key and Lookup types of mapped types, and rest were added.
  • On March 27, 2018, the improved key with intersection types supports added in the Typescript.

You will learn the difference between TypeScript and JavaScript and how TypeScript can greatly benefit JavaScript development. That it is so natural to support your continuous (even long running!) projects with TypeScript.

Difference between the Typescript & JavaScript.

Here are a few key highlights of TypeScript.

1.ClassesHere are a few key highlights of TypeScript.

TypeScript permits development by class, like Java, C++ or C#. Coming up next is a substantial class in TypeScript document with .ts expansion:

Class Employee {

private firstName: string;

private lastName: string;

private email: string;

private location: string;

}.

The above is a substantial TypeScript class. Like Java, C++, or C#, TypeScript additionally has help for “Constructor.” For instance, the code below has declared a constructor

Constructor(firstName:string, lastName:string, email:string, address:string){

This.firstName = firstName;

This.lastName = lastName;

This.address = address;

}

2.INTERFACES

Like in Java or C#, in TypeScript, you can also declare an interface that can be “implemented.” The following code below defines about “interface”:

interface Model {

color: string;

make: string;

}

class Mobile implements Model {

color: string;

make: string;

constructor(color: string, make:string) {

this.color = color;

this.make = make;

}

}

Most important to remember in TypeScript: There is no equivalent JavaScript code produced. It’s just proposed to be utilized for guaranteeing the right type at the hour of development.

3.Generics

The benefit of utilizing “Generics” is that you can tell the compiler in advance what the type will be. This will make the program run somewhat quicker, as “Object- Type” has just been recognized during compile time.

Following code shows us how to use generic:

work makeMobile(Mobile: T) {

return Mobile;

}

let x = new Mobile(“Green”, “Sony”);

let mymobile = makeMobile (v);

alert(“my Mobile is ” + mymobile.color + ” + mymobile.make);

4.DOM MANIPULATION

You can likewise utilize TypeScript to control the DOM. The below code shows how a “button” can be added to the DOM:

let submit = document.createElement(‘button’);

submit.textContent = “Submit”;

document.body(submit);

With this, it is anything but difficult to perceive how TypeScript streamlines JavaScript advancement by including object arranged ideas like class, interface, and module explanations to JavaScript; so that profoundly spotless and the JavaScript code can be developed. The other advantage is that your code base can be effectively managed without much difficulty.

5.Strongly – Static Type

TypeScript does not permit intermixing of values with various datatypes. Consequently, you need to define the types while declaring value and you can’t assign different values other than the defined type, which is truly possible in JavaScript.

Model:

let testnumber: number = 5;

testnumber = “myNumber”;/This will throw an error.

testnumber = 5;/This will work