Hi Devs !

I wanted to discuss a very interesting topic. A pretty new (just a few years) open-source project promoted by Microsoft and lead by Anders Hejlsberg, Founder of the .NET Framework : TypeScript.

What is it ?

TypeScript is an overset of JavaScript. It means that regular JavaScript will totally work in a TypeScript (.ts) source file. This language allows a developer to write JavaScript code in a typed fashion.

Typing

You probably know that JavaScript is weakly (or dynamically) typed. That means that it is not easy for a developer to identify the type of a variable by reading the source code.

OOP Concepts

Nowadays, a developer, is often object oriented minded and must use tricks to apply his convictions in JavaScript code. TypeScript allows to simulate OO concepts (classes, interfaces, inheritance, ...) and makes it far more easy to structure the code.

Productivity

Because of its dynamic typing nature, Productivity tooling for JavaScript is pretty succinct and not always reliable, because the tools cannot ensure before runtime what is really in the variables. By giving explicit types to variables, tools like Intellisense can be used at development time.

What does it mean concretely?

TypeScript brings a few cool features for developers:

• Explicit typing
• Classes and inheritance
• Interfaces
• Generics
• Modules (kind of namespace)
• Lambda expressions

At dev time, the author of the code will have some powerful tools available like intellisense and code check thanks to the known types. That will prevent inconsistency and unpredictable behaviors at runtime as much as possible.

Output

While the developer writes TypeScript code in a .ts source file, the output will be a compilation (roughly translation) into regular JavaScript, It means there will be no overhead at all in the deliverable. The compiling will fail if any error is found in the TypeScript source. This is another advantage of TypeScript. Here is a sample of TypeScript code:

// Countdown.ts file 
class Countdown {
    private initialValue: number; 
    private currentValue: number; 
    private timerToken: number; 
    
    constructor(initialValue: number) {
        this.initialValue = initialValue; 
        this.currentValue = initialValue;
    } 
    
    public start() {
        this.timerToken = setInterval(() => this.timerTick(), 1000);
    } 
    
    private timerTick() {
        this.decreaseCounter(); 
        if (this.currentValue == 0) {
            this.stop();
        }
    } 
    
    public stop() {
        clearInterval(this.timerToken);
    } 
    
    private decreaseCounter() {
        this.currentValue--;
    } 
    
    public getCurrentValue() {
        return this.currentValue;
    }
} 

And here is the result in the translated JavaScript

var Countdown = (function () {
    function Countdown(initialValue) {
        this.initialValue = initialValue; 
        this.currentValue = initialValue;
    } 
    
    Countdown.prototype.start = function () {
        var _this = this; 
        this.timerToken = setInterval(function () {
            return _this.timerTick();
        }, 1000);
    }; 
    
    Countdown.prototype.timerTick = function () {
        this.decreaseCounter(); 
        if (this.currentValue == 0) {
            this.stop();
        }
    }; 
    
    Countdown.prototype.stop = function () {
        clearInterval(this.timerToken);
    }; 
    
    Countdown.prototype.decreaseCounter = function () {
        this.currentValue--;
    }; 
    
    Countdown.prototype.getCurrentValue = function () {
        return this.currentValue;
    }; return Countdown;
})();

You can see the TypeScript code is much more readable and intuitive for an Object Oriented developer. Moreover, the developer does not have to implement tricks for simulating classes, private variables and public methods and does not have to deal with the prototype inheritance of JavaScript that seems not natural for C# developers for example.

Productivity improved

The tooling that comes with TypeScript could substantially improve your productivity. Intellisense and compiling will prevent typos and other kind of errors in the source code. If you write some libraries you want to publish or reuse, you will want the tooling to be available too. TypeScript handles a kind of header files that defines the types and the signatures of the methods in your libraries. These definitions are placed in a file with a .d.ts extension. Obivously, you could need using some third party libraries in your application and the tooling should be available too! Good news, There are already .d.ts files available for hundreds of libraries and frameworks. These definition files are managed by the DefinitelyTyped community (http://definitelytyped.org/) and are available from NuGet and GitHub repositories. Some already definitely typed libraries :

• JQuery
• JQuery UI
• angularJS
• nodeJS
• knockoutJS
• ...

Type your Scripts

Get starting with TypeScript using the reference site http://www.typescriptlang.org/ that proposes a playground allowing you to test TypeScript with some samples. I also invite you to check out a webcast of the TypeScript session by Anders Hejlsberg from the last //Build/ conference that you can see here

[EDIT] You can find a more recent Webcast about TypeScript from //Build/ 2015 here  

I really like this new language that is still young and its future is very promising.

I hope this article will encourage you to test it!

[EDIT] You can find a simple "The Price is Right" game I wrote using TypeScript here.

I hope you enjoyed reading this post, leave your comments!

Yannick