Welcome To TypeScript PART-1

In this post we are going to explore basic overview of  TypeScript.

What is TypeScripit:

TypeScript is Superset of JavaScript which is optional static typing and Class based object oriented programing Language. There are object oriented programing features like Class, Constructor, Object, Interface and always support primate data type. OOP Concept may be implemented in this Language .TypeScript’s code is more readable then JavasScript and It is open source and free.it created by Microsoft and announced in October 2012.

You can always download the source code here.
dicon Sourc Code

Now we will Create a simple application.

let’s get started:  

Let’s create a new project with Visual Studio 2015 > File > New > Project

ChooseTemplate

Once click ok button, a project with need typescript’s reference  will be created .

projectst

 

We can see that above picture app.css file it’s css file,you can keep your css style’s code in this file and we see app.ts, it’s a typescript file, ts extension means typescript file,you can always keep your typescript’s code in ts file.

Create ts file

Right click on your project >>click add>>click Javascript File and give named “Welcome.ts” and once click ok Button.Bellow is the following code.

Let’s get explained about Welcome.ts:

We have created Welcome class. There are a element properties and  a constructor which take a parameter this parameter’s type is HTMLElement. When we will create instance of welcome class then automatic call constructor. We have  just given div id which is index page. We Know that how to get div id using javascript. For catch div id we have used document.getElementById.”Welcome To TypeScript” has been assigned  within constructor.

Create Index Page

Now we will create Index.html page for show our result on browser.Bellow is the following code.

We have just add Welcome.js reference on index.html page. Because we have used Welcome.js for our coding.it is our Typescript file.

Finaly we get bellow result:

hellowresult

Hope this will be helpfull. Happy Coding ?

Leave a Reply

Your email address will not be published. Required fields are marked *