TypeScript, an open-source language, is a superset of JavaScript that compiles to plain JavaScript. TypeScript is object-oriented with classes, constructors, and interfaces and statically typed like C# or Java. With the knowledge of TypeScript, we can build web applications much faster, as TypeScript has good tooling support. It eventually can run in any browser, host or OS.

First of all Why, Why need TypeScript, What the purpose of TypeScript

Let start why we need TypeScript, Nowadays javascript is most popular script language because it supports all browser and does not need any special installation. Today no web development is possible without using javascript, with the help of javascript and CSS enhancing the look and feel, and animations or say delivering more responsive applications. But, it has been very hard to manage and write long code in javascript since javascript allows us to delay until the last moment and finally it breaks due to some mistakes. Then we need to investigate the deepest and complex code of javascript. The thing is, it doesn’t have type-safe validations, and annotations and allows you to write until it goes into action.

So most of web experts were missing the advance features like interface, classes, Inheritance, explicit type cast, reflection, object array support, etc. in JavaScript. Microsoft has delivered new Languages Typescript that just fills the gap of missing features like interface, classes, Inheritance, etc into JavaScript.

Ok, let’s create a simple application to display the content of div on browser using TypeScript.

Step 1. Create a new project with visual studio 2015 > File > New > Project

Click ok button, after that you can see below screen.

There are app.ts, its typescript file, extension is ts, and we can write typescript code in ts file. So now we will be creating a new ts file.

Step 2. Creating a new ts file

Right-click on the project > click add > click TypeScript File, you can name it as Hello.ts and click ok button.

Now Hello.ts file has been added to your project.

As you can see in the above image, I have created Hello class. There are element properties and a constructor that takes a parameter, the parameter type is HTMLElement. On window load I have create instance of Hello class by that constructor will be called automatically which sets the innerHTML of Div(contentDiv).

Step 3. Create Index Page 

Create new Index.html page but, Index.html already existed in this application, so we just add the Hello.ts reference on the Index.html. see the below image.

Step 4. Now Run the browser and get the output

See here “Hello, Welcome TypeScript” this come from “Hello.ts” typescript file

Ok, now let’s see some basic points of TypeScript


DataType and Enum

Right click on project click add>click TypeScript file name  “DataTypeAndEnum.ts” and click ok button.


Check the above image, I have added enum  Gender and data types Boolean, number, and string in class DataTypeAndEnum.


Now I am creating function “GetName” without any parameter and return type is string, but we can create parametrize and any return type and non- return type function as a normal programming language.





See the example one is parent class and the second is child class, child class inherit the parent class.

Static Functions & Properties

As we know static functions and properties only called by their class reference and cannot be called by an object reference.


Prateek Saxena
Ajay Kumar Goel
  • ✔ 10+ years of professional experience which includes 5+ years as Founder and Co-Founder as a Technology Partner of lean startups across different domains.
  • ✔ Technology Advisor to various companies and organizations.
  • ✔ Passionate for technology & businesses and making them successful.
  • ✔ Core competencies in Project Management methodologies and implementing digital strategies using Web 2.0 Technologies.