TypeScript: JavaScript Like Programming Language by Microsoft

Abhimanyu K Vatsa
12y
7.1k
0
0

Article

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 the 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:

</head>

<body>

<div>

</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:

</head>

<body>

<div>

</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 a 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 future.

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