TypeScript: JavaScript Like Programming Language by Microsoft

Introduction

Okay, here is great news, Microsoft has released a developer preview of TypeScript, a new programming language like JavaScript that is translated into JavaScript so that its apps can be run in any browser. In other words, TypeScript is a superset of JavaScript and you write with it like you write JavaScript. And today, I explored it and I am sharing it with you.

TypeScript is a language for application-scale JavaScript. TypeScript adds optional types, classes, and modules to JavaScript. TypeScript supports tools for large-scale JavaScript applications for any browser, for any host, on any OS. TypeScript compiles to clean, readable, standards-based JavaScript.

TypeScript has a syntax that is very similar to JavaScript but adds features, such as optional static typing, that Microsoft programming language guru Anders Hejlsberg says will make it easier for developers to build larger applications.

Hejlsberg created Turbo Pascal, was the chief architect of Delphi, and is the lead architect of C# and LINQ. He developed TypeScript with Steve Lucco and Luke Hoban.

Here's a list of features:

Optional static typing
Class declarations
Support for modules
A Visual Studio plugin
It's Open Source and under the Apache 2.0 license
You can install the tools easily with 'npm install -g typescript'
You can play with it online at "http://www.typescriptlang.org/Playground"

So, let's get started by building a simple website or web application with TypeScript.

Step 1: Get TypeScript tools

There are two main ways to get TypeScript tools:

Via Node.js package manager (npm) or
By installing the TypeScript for Visual Studio 2012 plugin (Download it from here)

I'm going to use the second choice of which you don't even need to install it, just visit here and play it online.

There are samples you can try from here.

Note1: Close Visual Studio 2012, Microsoft Word, SQL Server VSS Writer, Windows Explorer before installing the plugin. I realized, there is some bug with the installer, after closing every normal process it will force you to close something but actually nothing opened.

Note2: At the end of the installation, the system will reboot.

Step 2: Screens of TypeScript Installer

Step 3: Create a new Web Site

Create a new website in Visual Studio from File > New > Web Site. Now we will have a new project, add a new web page (.html or .aspx).

Step 4: Coding on Web Page

I added a greeter.ts (similar to greeter.js file) file and typed the following TypeScript codes. Why .ts extension, it is because Microsoft recommended to use .ts extension for this new language.

function greeter(string) {
return "Hello, " + person;
}
var user = "Abhimanyu K Vatsa";
document.body.innerHTML = greeter(user);

And the HTML markup is:

< html xmlns = "http://www.w3.org/1999/xhtml" ><
head runat = "server" ><
title >< /title><
/head><
body ><
form id = "form1"
runat = "server" ><
div ><
script src = 'greeter.ts' >< /script><
/div><
/form><
/body><
/html>

If you know JavaScript you will not encounter any difficulty understanding the preceding code. I used a .ts extension, but this code is just JavaScript. You could have copy/pasted this straight out of an existing JavaScript app. Now, run the application and you will see "Hello, Abhimanyu K Vatsa" on the web page. Very simple.

Note: In the above example, if you use the .js extension then it will work fine because the code is just JavaScript, nothing else. But when you actually use TypeScript codes, you have to have the .ts extension, otherwise, you will see errors.

Step 5: Compiling .ts file to produce .js

Let's have another example which will use TypeScript codes.

i) Create a .html page with the following markup:

< html xmlns = "http://www.w3.org/1999/xhtml" ><
head runat = "server" ><
title >< /title><
/head><
body ><
form id = "form1"
runat = "server" ><
div ><
script src = 'greeter.js' >< /script><
/div><
/form><
/body><
/html>

ii) Add a greeter.ts file in the project with the following codes:

class Student {
fullname: string;
constructor(public firstname, public middleinitial, public lastname) {
this.fullname = firstname + " " + middleinitial + " " + lastname;
}
}
interface Person {
firstname: string;
lastname: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstname + " " + person.lastname;
}
var user = new Student("Abhimanyu", "K", "Vatsa");
document.body.innerHTML = greeter(user);

Here we create a Student class with a constructor and a few public fields. Notice that classes and interfaces play well together, letting the programmer decide what is the right level of abstraction.

For now, I have an HTML page and a greeter.ts page. If you run your project now, you will not see any output because I used a greeter.js reference in my .html file. So, we need to compile the greeter.ts file to produce a greeter.js file and this is compulsory because the browser only understands JavaScript, not TypeScript. Find the image below and follow the numbering to generate the JavaScript file.

In the above image, I opened the "Command Prompt" and navigated (2) to the website root location where the greeter.ts file (1) exists and then executed the command (3) 'tsc greeter.ts' to produce the JavaScript file "greeter.js" (4).

Now, we are all set to run the project, run it and explore it yourself.

Note: Hopefully, Microsoft will enhance this to make auto compilation in Visual Studio IDE in the future.

Here is an image that shows, how TypeScript works (cycle):

TypeScript gets translated into JavaScript and then the browser executes it.

12 Comments

Join the conversation! Your thoughts help the community grow.

Sourav Kumar Das7y ago
Good Article Sir.
Nitesh Kejriwal14y ago
Good one Abhi!
Shirsendu Nandi14y ago
very good article for this topic...it's hot in market..
Richa Garg14y ago
Wow its really a nice language.. thanks for giving this new language introduction Abhimanyu.
Rohatash Kumar14y ago
Thanks for introducing new language.
Megha Goyal14y ago
wow its a great language i'll also try to make article on it
Varesh Tuli14y ago
Very nice article to learn new language, thanks for sharing..
Gaurav Chauhan14y ago
Its provide another option beside javaScript and thats a good thing to learn.
Gaurav Gupta14y ago
Great Vasta you always explorers new things. Thanks for sharing...
Mahesh Chand14y ago
Very nice start Abhi. I was thinking to start learning this new language but did not get a chance yet.
Abhimanyu K Vatsa14y ago
@Nitin Have you created any .ts file that contains TypeScript code, if yes then you need to compile it to get JavaScript version of the same code?
Nitin Bhardwaj14y ago
I have installed TypeScript in Vs12 but It is not show in vs12 feature.