TypeScript: JavaScript like Programming Language by Microsoft

Okay, here is a 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 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 try 2nd way, even you don’t need to install, just visit here and play it online.

There is some samples and you can try them from here.

Note1: Close Visual Studio 2012, MS Word, SQL Server VSS Writer, Windows Explorer before installing 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 installation, 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 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 face any difficulty understand 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 above example, if you use .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 .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 an .html page with 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 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 greeter.js reference in my .html file. So, we need to compile greeter.ts file to produce greeter.js file and this compulsory, because browser only understands JavaScript not TypeScript. Find the image below and follow the numbering to generate the JavaScript file.


In above image, I opened the ‘Command Prompt’ and navigated (2) to website root location where greeter.ts file (1) exist and then executed the command (2) ‘tsc greeter.ts’ to produce JavaScript file that is ‘greeter.js’ (4).

Now, we 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 a image that shows, how TypeScript works (cycle):-



TypeScript gets translated into JavaScript and then browser starts acting it.

Anders Hejlsberg: Introducing TypeScript


Comments

  1. Abhi, why I use TypeScript??

    ReplyDelete
  2. why Microsoft trying to change the existing system by adding a new layer.

    ReplyDelete
  3. Replies
    1. Static Typing is something that provides the feature like tracing errors at development time (coding time). Assume when you type any JavaScript code and made any mistake, can you see the instant error (like a red underline or like we get in C#/VB) at development time, off-course not. So, TypeScript has all that features, for more watch the embedded video in the article.

      Delete
  4. Hey Abhi, What is the use of this? Anyhow its working with JavaScript extension and the code is same. Why they are adding a new layer. It will take time to convert. And also increase the time to run the project.

    ReplyDelete
    Replies
    1. @Anonymous: TypeScript is answer to developers who actually like JS's dynamic, functional, prototypal nature. It helps developers to write better, maintainable, application-scale JavaScript at development time.

      @Amit Kant: What if Microsoft will enhance Visual Studio IDE feature so that TypeScript automatically compiles into JavaScript? TypeScript is only for those developers who wanted to write better, maintainable and application-scale JavaScript.

      Delete
  5. I wanted to thank you for this great read!! I definitely enjoying every little bit of it I best blog engine for programmers

    ReplyDelete

Post a Comment

Popular posts from this blog

Customize User's Profile in ASP.NET Identity System