Over a million developers have joined DZone.

Blazingly Fast JavaScript Development

Level up your JavaScript development, and see why TypeScript is so awesome.

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

I have been trying to keep myself out of UI Development for years until recently with the emergence of Microsoft TypeScript. Developing UI elements with TypeScript is such a breeze that I no longer hit my keyboard too hard and my colleagues are no longer afraid to approach my desk during UI development. Most importantly, I spend more time with my family rather than countless late nights in the office trying to solve an unknown mystery.

Unknown Mystery






Kudos to Microsoft for understanding developer frustrations and filling the long-standing void in JavaScript.

Why TypeScript

Here are a couple of reasons that this appeals to me.

Object Oriented Support

One of the main goals of TypeScript is to make it as compatible as possible to ECMAScript 6, hence it supports most (if not all) of the object oriented concepts/constructs, specially classes, interfaces, modules, generics, static typing, etc. The following code snippet demonstrates most of the concepts. It looks more natural and closer to what an object oriented developer would imagine. This is a good point about typescript in that it borrows most of the concepts and syntax from existing languages, hence the educed learning curve.

Object Oriented TypeScript










Here is the JavaScript equivalent causing much commotion for object oriented developers (Example: Java developer).

JavaScript Code Snippet 

IDE Support

Most of the IDEs (EclipseWebStorm, and Visual Studio) have support for TypeScript, either built in (Visual Studio) or as a plugin. All of which makes life easier since IDE acts as the enforcer and guide developers need.

Build Tool Support

All major JavaScript build tools GruntGulp and Brunch have TypeScript support. In fact, the example source code demonstrates how we can marry Grunt and TypeScript together very easily.

Syntactic Sugars

Most prominent is the Arrow function or Lambda expressions. Every JavaScript developer has experienced losing the this object while running functions asynchronously, especially in callbacks. Suddenly you find your this object changed by something unforeseen, and as a result you end up nodding your head the whole night in front of your monitor. A simple work around is to preserve the this object in some other variable, for example:

JavaScript This Object






The equivalent TypeScript code would be:

TypeScript This Object

External Library Integration

In the above example you must be wondering, where is CanvasRenderingContext2D defined? This is where type definition(.d.ts) files comes into the picture, Typescript has definition for every core JavaScript feature/functionality.

TypeScript Definitions







The million dollar question: What about the external libraries (JQuery, Backbone, Jasmine, AngularJs, etc.)? It can be defined based on the functionality it provides and that is why the Definitely Typed repository exists. If you explore this repository you will find the d.ts for almost everything you can think of. If for some reason it does not exist, it can be created easily.

TypeScript Alternatives

There is no shortage of languages that compile to JavaScript. CoffeeScript is perhaps the best known example of one of these languages. TypeScript is just one of the many languages that compile to JavaScript, and some of the other popular options are:

  • Google Traceur: Compiles EC6 (Syntactic niceties including class, module, arrow functions, promises, default parameters, etc.) to EC5 JavaScript.
  • Google Dart:  Completely new language to address JavaScript issues, cleans up its semantics, and adds static types and class based and object oriented features without being dogmatic.
  • CoffeeScript: Neater syntax which is based on other dynamic languages, thereby making it easier to write.

Applications Using TypeScript

  • Office365 and Visual Studio Online use TypeScript heavily
  • hawtl.io UI is written entirely using TypeScript

Sample Application

This sample Typescript application is loaded with lots of features and basically demonstrates Typescript feature usage in collaboration with existing libraries and tools.

  • Generics
  • Module, Classes and Interfaces
  • Unit Testing With Mocking and Spying Using Jasmine
  • Grunt Usage
  • Project directory structure organization

Feel free to clone it and play with it. Instructions are provided in the Github repository. 


We have been witnessing the proliferation of single page applications that are built using JavaScript. It would be a tedious task to maintain/write these applications with just pure JavaScript. Languages that compile to JavaScript (TypeScript for example) provide good syntactic sugar, structures and constructs are becoming immensely helpful.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

typescript,javascript,java,web dev

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}