Quick start with TypeScript

You might be heard about javascript but what is TypeScript?

Well, Typescript is a superset of Javascript. It provides typed nature to your code. Typescript can be used for cross-browser development. This article is intended to give you a quick overview about type script.

Environment Setup

To get start to typescript applications you have to install some prerequisites softwares in your machine.

1.Install nodejs

Go through this link and download latest stable version (LTS)

https://nodejs.org/en/

2.Install http server

Open your terminal and type: npm install http-server –g

3.Installing typescript

There are two main ways to get the typescript tools

a. By installing Typescript’s visual studio plugins.

b. Via npm

For method a:

Visual studio 2015 and Visual Studio 2013 include Typescript by default. But if you didn’t install Typescript with Visual Studio, you can still download it through this link “https://www.typescriptlang.org/#download-links”

For npm users:

Open command prompt and type : nbm install –g typescript

4. Install Visual Studio code IDE (https://code.visualstudio.com/)

That’s it .now we have all the prerequisite software to start our firs application in typescript.

Let’s start coding

Typescript code consists of plain Javascript code as well as certain keywords and constructs specifics to Typescript. However, when you compile the Typescript code it is converted into plain JavaScript. I know its sounds confusing we will be discussing it through a simple example.

Consider the following code written in TypeScript.

Have you noticed “:String”?

:String is a one of the new tool Typescript offers. It helps to indicate the data type of the parameter. Not like java script, Typescript has some specific words such as ‘class’ and data types such as ‘String’, ‘number’.

Compiling your code

Even though we used .ts extension , after the compilation result will be the javascript file (myFirstApp.js).

It’s not a magic!!

Let’s try

Open your terminal and type : “tsc myFirstApp.ts”

Now you will find a JavaScript file with the same name in the same directory.

Now you might ask we are converting typescript to javascript while using it in the applications so why do we need typescript?

When your codebase is huge, and more than one person works on the same project, a typescript can help you to avoid a lot of common errors. JavaScript is dynamically typed for example javascript does not know what type a variable is until it is instantiated at runtime.It may be too late. But TypeScript makes typing a bit easier and a lot less explicit by the usage of type inference.

For example in javascript :

In this example we don’t know the data type of ‘person’. So we can put any data type value for that. It won’t give any errors. It causes many common error while coding.

In TypeScript

But in TypeScript, we intend the sayHello function to be called with a single String parameter. We can try changing the variable type to integer.

Let’s try out and see that

While compiling this file it will give compilation error.

Finally, let’s extend our example with classes and interface. Typescripts supports class based object oriented programming.

Let’s look at an example

Here we have creates a ‘Lecturer’ class with a constructor and few public fields. And note that classes and interfaces play well together in TypeScript

Ok, we’ll compile and see