Introducing TypeScript — JavaScript on Steroids

Unless you’ve been hiding under a bush all week, you’ve no doubt encountered TypeScript; Microsoft’s new language for application-scale JavaScript development. There’s plenty of mis-information flying around, so I thought I’d join in…

First, TypeScript is not a replacement for JavaScript. TypeScript is to JavaScript as C++ is to C. It’s an extension of the language rather than a new syntax in its own right.

TypeScript is compiled (“pre-processed” or “transcompiled” would be a better description) into native JavaScript code. It’s a similar concept to CoffeeScript except TypeScript is far closer to JavaScript’s existing syntax; JavaScript++ if you like.

TypeScript Features

TypeScript offers static typing; you can define the data type of variables. The syntax is slightly unusual for those coming from C-inspired languages in that the type is specified after the variable, e.g.

function Hello(name: string) {
	return "Hello " + name;
}

Many developers will be overjoyed to find class declarations and inheritance, e.g.

// base class
class Language {
    private hasClasses: boolean;

	constructor(hasClasses: boolean) {
        this.hasClasses = hasClasses;
    }

    ClassSupported() {
		return (this.hasClasses ? "yes" : "no");
    }
}

// JavaScript language
class JavaScript extends Language {
    constructor(){
        super(false);
    }
}

// TypeScript language
class TypeScript extends Language {
    constructor(){
        super(true);
    }
}

var js = new JavaScript();
alert(js.ClassSupported()); // no

var ts = new TypeScript();
alert(ts.ClassSupported()); // yes

We also have interfaces:

interface Website {
	name: string;
	url: string;
}

function ShowSite(site Website) {
	return site.name + " at http://" + site.url + "/";
}

alert(ShowSite({ name: "SitePoint", url: "www.sitepoint.com" }));

Interestingly, an object doesn’t have to explicitly state it’s implementing an interface; it only need match the expected definition.

Finally, TypeScript implements modules, e.g.

module Say {
	export function Hello(text: string) {
        return "Hello " + text + "!";
    }
}
alert(Say.Hello("world"));

All code translates directly to JavaScript, e.g.

var Say;
(function (Say) {
    function Hello(text) {
        return "Hello " + text + "!";
    }
    Say.Hello = Hello;
})(Say || (Say = {}));

alert(Say.Hello("world"));

Microsoft has provided a great online playground to help you evaluate the syntax: www.typescriptlang.org/Playground/

I Like TypeScript Because…

Let’s look at the good stuff.

Developers new to JavaScript often struggle with the concept of prototypal inheritance. It’s a different mindset to classical inheritance concepts used in languages such as C# and Java. TypeScript offers reassuring comfort.

Sensibly, TypeScript uses the proposed ECMAScript Harmony class syntax. When that becomes widely available (don’t hold your breath), the TypeScript compiler won’t need to convert classes and your code will still run.

Static typing permits better IDE features such as auto-completion, refactoring and debugging. A plugin has been released for Visual Studio, Sublime Text, Vim and Emacs with more on the way. In other words, it should be easier to develop complex JavaScript applications.

TypeScript can be used on the client or server in Node.js. It’s a superset of JavaScript and compiles to raw, non-obfuscated code. Unlike Google’s Dart language, TypeScript doesn’t attempt to replace JavaScript entirely, require other browser vendors to add features or need chunky runtime libraries when it’s transcompiled. It has a far better chance of success.

The language has been designed by Anders Hejlsberg who brought us the excellent C#. TypeScript is open source and provided under the Apache 2.0 license at typescript.codeplex.com.

Finally, the TypeScript compiler is written in TypeScript. That’s brain-achingly cool.

But…

I suspect TypeScript will be adopted by developers using Microsoft .NET and Visual Studio. While it’s undoubtedly useful to others, there are sectors of the web development community who wouldn’t dream of touching a Microsoft product. Make up your own mind — there will always be “Microsoft! ARGH!! Noooo!!!” comments.

Microsoft created TypeScript because JavaScript remains the most misunderstood programming language ever devised. Opinion has improved in recent years, but you’ll still see comments stating JavaScript is a failure and shouldn’t be used by ‘proper’ developers. Few provide reasoned arguments other than their own snobbery or misunderstanding of the language.

I love JavaScript. It’s flexible, powerful and offers features which are being adopted by other languages. I can understand the rationale behind TypeScript and think it’s been implemented well, but I’m unlikely to use it when I’m more than happy writing native JavaScript code which is more efficient (or should be).

But if you’re not a gushing JavaScript fan-boy like me, TypeScript offers a compelling alternative.

For more information about TypeScript, head over to typescriptlang.org.

And — before you ask — Microsoft didn’t sponsor this article or ask me to write it.