Understanding TypeScript

Posted by Anil Kumar Articles | TypeScript November 05, 2012
The TypeScript language is a superset of JavaScript but a subset in syntax. It has been built to support easily building large-scale web applications with features like modules, interfaces, classes etc.
Reader Level:


What is "TypeScript"? I will be explaining its features and what you can do with it in details!

(If you are not a beginner in .Net programming, you can leave this and directly jump to Starting with TypeScript.)

Preface: Well techies, in this article I am just going to tell you about Microsoft's new product TypeScript. But before starting about TypeScript, I would like to say something about the .Net revolution and how Microsoft is providing the best tools and languages to build applications.

Microsoft has delivered many IDEs, tools and new Languages to develop software solutions. Now in Visual Studio 2012 Microsoft has come out with a new language "TypeScript". In Visual Studio 2012 there are not many changes other than tools, templates, looks and feel so you can continue with it without migration hassles from older versions.

Microsoft provides the smarter and easier way of developing software solutions / applications with modular approaches. You can notice that Windows 8 is totally changed from earlier Windows. The new Team Foundation Server (TFS) is providing much more and making life easier for group programming/coding. Metro Style applications are a hit. I read an article somewhere and the writer was saying that it is the end of Microsoft by launching its Windows 8. Surprise!!! Probably he forget to mention that it was Microsoft who developed the highly GUI based Windows Operating System and made computers usable for common people. How many common people use other operating systems than Microsoft Windows? At that time too it was a very big change from the current trend too. I personally see it as a new evolution because common people are accustomed to common functionalities (in modern life everyone is using mobile, at least those who will be using the new Microsoft Windows 8) so in a few days they will be found easier to work with the new look and feel with the functionality of Microsoft Windows 8.

First let me say that if you are thinking to be proficient in TypeScript then it is a good choice and makes development of large-scale web applications easier and smarter. I coded in the days of Visual Basic 6.0 and now we can see the market demand is web and web applications. For a while there we saw some forward developments toward Windows Desktop based applications using WPF and Silverlight but not web.

Since this article is about TypeScript, so I am not going to go into a deep history or bore you with my childhood's stories. But we see two major changes since the first launch of .Net framework 2002. Now .Net is a decade old and have gone through Web services to WCF services, from SOAP messages to RIA. Now almost everyone is looking for web based applications. Most web applications are being developed in WCF and the MVC pattern. It has gone to small development companies now. Bigger companies are mixing the technologies and working with WPF and Silverlight, wiring them with WCF services and building large-scale web applications.

A few days ago one of my technical architect friends switched from a pure MVC pattern based ASP.Net to the WPF side. He says there is a lot to go and come in that version of .Net. He also adds that big changes can be noticed in current Windows applications and earlier versions of Windows applications. In fact web development has overtaken the race from Windows version development but the later is giving a good challenge now.

Anyway, you came to this article to learn something about TypeScript, so I will proceed take you on that show.


Starting with TypeScript

So, the first thing is, what is TypeScript and for what purpose is it meant for?

Well, every web application is enhancing its behaviour, look and feels, and animations or say delivering more responsive applications with the help of JavaScript and CSS. JavaScript has become the main choice for nearly all web developers and has become popular in them. These web experts were missing some advanced features like Interface, Class, Inheritance, explicit type cast, reflection, object array support etc. in JavaScript.

There are many plugins written in JavaScript and being utilized under various licensing types. So it is no doubt that JavaScript has been accepted as a very important part in web application development. And the interesting thing is that today's famous jQuery and other frameworks/libraries are well written in JavaScript only.

It has been very hard to write complex & long code in JavaScript since JavaScript allows us to delay until the last moment (run) and finally it breaks due to some mistakes. Then you need to investigate the deepest and lengthiest code of JavaScript. The thing is, it doesn't have annotations, and type-safe validations etc. and allows you to write until it goes in action. Complex object data type creation, constructors, interface creation, modularization are the main concern when writing scripts in JavaScript.

To overcome the above problem, a new Language has been designed and built on the base platform of JavaScript. So the purpose was clear to build this new language as it was that just fill the gap of missing features into JavaScript. And this new language is intended to allow us to write our scripts in real-world objects (complex ones), use of interfaces, constructors and type-safe at the moment of code typing and much more. Its code fault detection during coding is a boost and saves a significant amount of time. It also has annotations to help us while writing scripts. TypeScript is just for that. It is not like C# and VB.Net that compiles its code into MSIL; instead it compiles into pure JavaScript!!!


Picture : TypeScript is based on ECMAScript and is a super-set of JavaScript with high-level language features.

So we can just say that TypeScript is a language which is a superset of JavaScript but a subset in syntax. It has been designed to make the building of large-scale web application easier with its features like modules, interfaces, classes etc. If you don't mind (I am not sure, sorry) I would like to abstract it as a very high level special translation tool which has most of the features of any high-level language. TypeScript was born from JavaScript and finally converts into JavaScript.

So can the TypeScript programming language be used instead of C#?

No. TypeScript does have nearly all features required to be a good programming language. It has a good language specification too which makes it more rock-solid. But the important point is that it is not a substitute for C# or VB.Net. It is a superset of JavaScript.

TypeScript is not like the other languages C# and VB.Net that compile their code into MSIL and run on the CLR. Its creation is for a different purpose and so its output or compilation is totally different. So don't get confused that you can drop C# for your code-behind coding. C# is still there. You can conclude that this TypeScript is just a super-duper form of JavaScript and not a replacement of your code-behind languages like C#, VB.Net etc.

jQuery is also built on JavaScript, so TypeScript?

No, jQuery is a collection of already tested functions that are written in JavaScript. so jQuery is a library and not a language. TypeScript allows you to write your JavaScript as well as some complex level programs that are finally translated (compiled) into JavaScript. One (jQuery) is well written in JavaScript and the other (TypeScript) is finally translated into JavaScript. See a small difference between the duo in the following:


Picture: One (jQuery) is well written in JavaScript and the other (TypeScript) is finally translated into JavaScript

So why did I compare a language with the jQuery Library ?

Well, it is because of the "Script" suffix with TypeScript. I am fond of both. So don't say that I am taking either side. Cool!!

Okay, so it is language with a compiler which converts its code into JavaScript, right? But why so ?

As I said previously, JavaScript is widely used and is in nearly every web application. You may have written much JavaScript code and may have often felt that, what if it has features for writing complex & lengthy programs. JavaScript lacks interfaces, inheritance, typed data types etc. And TypeScript is built for this and it fill the void with some high level language features. So the final outcome (translated one) is JavaScript only.

Great! But what about my those plugins/libraries that I have written in JavaScript? Must I rewrite them into this TypeScript?

No, since the TypeScript code is translated into JavaScript only, your JavaScript code is compatible and very much a part of it. TypeScript is just wrapping JavaScript into it with giving a high level language feature. So in one code place you can have a mixed code pattern. Wow!!!

But, wouldn't it take time to learn TypeScript syntax/patterns?

No, not so much. It is easier because it has a simple syntax format with a new special character ":" with the old-fashion style of JavaScript. Since you know the ABC of JavaScript coding and fundamentals of high-level languages (using interfaces, inheritance etc.), it would not be hard to master it (and may be just like cooking Maggie).

You are going to play with the ":" colon character. Also it is strongly typed so it minimizes the mistakes of JavaScript by giving annotations and errors. You are going to benefit from its intelligence that provides great annotations!!! Let me thank its creator one more time.

So far TypeScript seems pretty good to use, but what about its features?

Well, you seem to be in a hurry to adopt it. TypeScript is not yet finalised and what we see now is its preview version. So the final version may have some changes in current use-types and will comply with ECMAScript version 6. ECMAScript version 6n is still in process and its specification is not yet released. So whatever features are in ECMAScript 5 version are OK but some features that have been provided on speculation of ECMAScript version 6 should be avoided. TypeScript supports a popular modular system of ECMAScript 3 with CommonJS. ECMAScript version 6 proposals, like arrow functions, modules and classes are tentaively defined and may be a part of the TypeScript final release version. I hope all of its features will compatible with the future ECMAScript version 6.

As its logo says (note the bottom) "preview", this language should be taken as preview only. Once its final release is available (which is likely due in the next year only), then it should be used in a pure development. This is not what I am suggesting but many experts have already suggested this view. It is not clear what features will be in ECMAScript version 6 and so the TypeScript proposed features of class may have some difficulty in the future.

What is ECMAScript?

ECMA has been providing global standards since 1961. Wikipedia describes ECMAScript as:

"ECMAScript is the scripting language standardized by Ecma International in the ECMA-262 specification and ISO/IEC 16262. The language is widely used for client-side scripting on the web, in the form of several well-known dialects such as JavaScript, JScript, J# and ActionScript."

So far now, the ECMAScript 5th release is done and version 6 is pending. You can find the versioning publication by year wise as:

Editor / Lead By                                             Published In                                              Version

Guy L. Steele, Jr.                                            Jun - 1997                                                           1

Mike Cowlishaw                                             Jun - 1998                                                           2

Mike Cowlishaw                                             Dec - 1999                                                          3

Pratap Lakshman,Allen Wirfs-Brock                 Dec - 2009                                                          5

Pratap Lakshman, Allen Wirfs-Brock                Jun - 2011                                                           5.1

The new version 6 is supposed to come next year and will likely support classes like features that are a part of high-level languages.

Where can I get the specification details of ECMAScript?

Article Extensions
Contents added by Mahesh Chand on Nov 07, 2012
Download TypeScript Language Specification

Download TypeScript Language Specification here:


Trending up