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.