What is TypeScript, and why I like it.

I have been working with TypeScript on a new project for about 4 weeks now, and I must say, I have been loving it. It is still JavaScript, but it feels like something new and completely different. It's cleaner and it just feels right. My tools have also never seen anything quite like it. They light up as I code and start telling me all kinds of interesting things about my JavaScript code that I never knew it could. Did I mention that I really like TypeScript?

What is TypeScript?

If you have never heard of TypeScript before, let me get you up to speed. TypeScript is an open-source project from Anders Hejlsberg and his team at Microsoft. It is a super set of JavaScript. Meaning it augments and enhances JavaScript without changing it's core syntax. It is meant to enable developers to write large-scale enterprise web applications using clean structured code and enabling better tooling support around it. People have compared it to CoffeeScript, or even Dart. While all three of these compile down to JavaScript, CoffeeScript has a completely different Syntax, and while Dart has a similar C style syntax, it diverges quite a bit from there. They are different languages unto themselves.

What does TypeScript add to JavaScript?

Like I mentioned already, TypeScript is a super set of JavaScript, but what does it actually add to the language? TypeScript adds all kinds of neat stuff like Classes, Interfaces, inheritance, statically-typed variables, private and public members, easy module support and more recently, generics. The really cool thing is you can use as little or as much of this stuff as you want. If you use third-party javascript libraries, you can add ambient declaration files and get enhanced tooling support for those libraries. Better tooling means a better developer experience, and that's never a bad thing.

Another great thing about TypeScript, is that it follows the ECMAScript 6 standard that is currently in development. So, while you are spending your time learning TypeScript, you are also learning a future version of JavaScript. They have added a lot of the things that will be in ES6 and for the most part kept them standards compliant, which is really nice. Well, that's enough talking, let's get to some code.

If you want to try some of these code snippets out. Check out the Live Playground at the TypeScript website.

Classes

TypeScript adds classes and inheritance, which is a new feature in ES6. They compile down to javascript closure functions and adds functions to the prototype.

class Person {
    constructor(private name: string) { }

    public GetName(): string {
        return this.name;
    }
}

I did a few things here. This is a basic class structure. It can have any number of public or private methods. In JavaScript, these accessor declarations don't actually mean anything as all members are public. These are only enforced by the compiler and gives information to your tools. I also specified explicit types for each member. These do not make it across to javascript either, but again it gives the compiler and tooling more information to work with. Notice the constructor doesn't assign the name field. The compiler does this for us automatically.

class Student extends Person {
    constructor(name: string, private school: string) {
        super(name);
    }

    GetSchool(): string {
        return this.school;
    }
}

You can extend any class as well. In this case we just pass name along to the base class. Paste this into the TypeScript playground. You can see that no type declarations make it across. It doesn't even declare the members. It simply adds them directly to the closure's this value object. Very clean and easy to read.

Interfaces

interface School {
    public name: string;
    public grade: number;
    public address?: string;
}

Interfaces are basically contracts that your code can use to declare explicit object structures which the compiler can enforce. In this case, a School object must contain two members name and grade. address is declared as a nullable optional type by the question mark. You may notice that nothing here makes it across to the compiled JavaScript. It's simply another tool you can use to structure and enforce rules in your code during development.

Modules

Modules are a great way to organize your code across your application. TypeScript adds this as yet another ES6 feature that you can use right now. It's not an exact match to the ES6 specification, but it will continue to evolve to be standards compliant as the ES6 module spec is finalized. You can even choose which module pattern you want to compile to. AMD (Used mostly on the front-end) or CommonJS (As used in Nodejs), which are both popular module patterns. In essence, all TypeScript source code files are modules (external modules to be exact).

module Calculator {
    var result:number = 0;

    export function Add(a: number, b: number) {
        result = a + b;
    }

    export function GetResult() {
        return result;
    }
}

This is an internal module. It is declared within the body of a source file and acts as a singleton instance with it's own isolated state. In this module, there is a private member result. This is not accessible outside the module, so it is a true private member. Anything that is public is specified with an export type.

Any regular source file is considered an external module. Consider the following example.

Logger.ts:

export function log(msg: string) {
    console.log(msg);
}

Main.ts:

import logger = module("Logger");
logger.log("Hello, Console!");

In this instance, we have two files. A Logger module is created in a separate source file. It is then imported into your Main file using an import statement. This will instantiate a new instance of the Logger module which you can use. The compiler does all of the heavy lifting for you.

Generics

This is a brand new feature in TypeScript. Take a look at the generics example in the TypeScript playground to see an implementation. I think it's really interesting how none of this makes it across in the compiled javascript output. Javascript is a dynamic language and it's powerful type inference engine just lets this work. You however, get to take advantage of the nice code reuse, type safety and intellisense you get from using generics in a strongly typed language.

Conclusions

I think you can quickly start to see what TypeScript brings to the table. For us .Net developers who can't get enough C#, it is an amazing tool. Microsoft also went the extra step and added some amazing support right inside Visual Studio. There are also some plugins available for other editors like Emacs, Vi, Sublime Text and JetBrain's WebStorm IDE has support built right in. I imagine this list will only get bigger. If you want to try it out in Visual Studio, make sure to install Mads Kristensen's Web Essentials 2012 extension. It gives you extra support and adds a really nice live side-by-side compiler just like in TypeScript's playground page.

Enjoy!