Learn TypeScript with basic Hello World Example Part1

Hi Guys,We back with our new Tutorial Session TypeScript. This is very interesting hope you guys really enjoying this tutorial.We just started with the basic hello world Example.So,Lets Starting without wasting time.

First of all we need editor any of editor you take.We are using Visual Studio for programming with TypeScript. As you know the TypeScript is the Super Set of JavaScript.Visual Studio Support very robust four type of Scripts.

1)Go to File then Add new project.Lets say HelloWorldTypeScript.

Add Project Asp.NET Web form Application

2)Now, Delete Script folder,Default.aspx and WebConfig file.We don't need these file.

Delete WebConfig, Script folder and Default.aspx files

3)Now,If you have already installed TypeScript and Web Essential for configuring TypeScript.If not then go first download Web Essential, TypeScript and install them.

4)Add New Item
TypeScript file with name Car.The Extension of typescript is "ts". So, the name would be Car.ts . The typescript is the Super set of javascript. you can write javascript code into typescript file,the good thing is no compile time error occuring.

Add TypeScript Car.ts and Create Class Car

5)In TypeScript, We are using variable type here as what type of variable it is.Let say engine variable of String type here as showen in figure. Use Constructor to initialize the engine variable so that whenever the Object is created it initialize the value of engine variable.The another window contains compile code of typescript of Car.ts.

6)Now, Create the Constructor of that class to initialize the engine variable.As shown below,Create function without using keyword "function".If you using this function keyword into the class then it gives error "Unexpected token;'constructor,function, accessor or variable' expected".That means the syntactical error there is no need to use function keyword to create the function.

Creating function inside the Class Car

6)If you are using JavaScript function outside the class then there is no error because the TypeScript allows us to use JavaScript function outside the class.

You can use function similarly as javascript

7)Now, We shift the start and stop function in side the Car Class.So, that we can fix the function error shown image below

Create function inside the Class Start and Stop

8)Add alert message with "Engine Started: " for start and "Engine Stopped: " for stop.And Add the this keyword to get the engine variable.Use window.onload function to start and create object on load of window.After creating the window onload function create object of Class Car by passing variable of string type.Exactly, We created the constructor to initialize the engine variable. So, we required engine name "V12". You can use any name to that engine for you car class.Now, Call the Start and Stop function. And Save your code the compiled code is shown in another window as shown below image.

Create Window onload event to start Script on load

9)After Compiling the typescript file, it generates the javascript file.You can see this file by see all files of your web application.Add html file to your web application.

Add html page to your web Application

10)Now put the reference of your generated javascript file Car.js to the html page.

Put the Reference of you javascript file Car.js in Html Page

 11)Now run you project the alert is prompt the first one contains "Engine Started: name of the engine" and another contains "Engine Stopped: name of the engine". The prompt window shown in below images.

Engine Started Prompt

Engine Stopped Prompt

You can configure your TypeScript to generate minified file also.To configure your TypeScript and Web Essential tool please check part 2 of our Tutorial.
Thanks have a good day :)

Bhupinder Singh

I am an Computer Science and Engineering Graduate working in the field of software developing for 5 years. I like programming, web developing. Freelance Programming and writing are my hobbies.

Newer Post Older Post