JavaScript was my first love as a coder. While I had been taught some LOGO and BASIC as a child, I really first learned to write real code in JavaScript. Unlike languages like C and Java, where your first “Hello, world” comes via command-line after a build process, the immediacy of JavaScript pulled me in. You would have thought that I would be very skeptical of adding a step in between the writing of JavaScript and seeing it in the browser. Instead, when a colleague brought Microsoft’s open-source extension of JavaScript, TypeScript to my attention, I was immediately intrigued. In the years since I first learned JavaScript, I have found myself running into plenty of shortcomings as I have written larger, more complicated, and more mission-critical web applications. I saw in TypeScript’s superset approach some potential solutions to these shortcomings. In the year that I’ve spent working extensively on a TypeScript-based web app, I’ve come to appreciate what it brings, as well as learning to deal with its own peculiarities.

The awesomeness

Auto-complete

Believe it or not, my initial interest in TypeScript was driven by the simple desire to have intelligent auto-complete in my JavaScript IDE. The client-side development team had been using JSDoc comments for quite awhile, primarily to help our IDE of choice (WebStorm) know what properties and methods were available on our JavaScript objects. However, JSDoc must be kept manually up-to-date with the actual code, and you must get complete buy-in from all team members in order to have useful information for the editor to consume. Unfortunately, our experience was that JSDocs became outdated quite quickly, and even with JSDoc, IDEs struggled to figure everything out. TypeScript’s optional compile-time type-checking provides strict rules that allows for much more intelligent auto-complete. This simple feature can significantly speed up development when coding against established code bases.

Static typing

Static typing versus dynamic typing is one of the classic computer science arguments. From my point of view, TypeScript’s optional static typing helps me to feel confident that a module written by one developer is being used properly by another developer. As a strict superset of JavaScript, it is still possible to write code that accepts a wide range of types and flexibly adapts to usage. But when you want to make sure your carefully-crafted method is only passed a certain type of object, you can lock it down, and other developers will receive a compile-time error if they attempt an incorrect usage.

Class inheritance

As everybody who’s ever read Douglas Crockford knows, classic JavaScript is not an object-oriented programming language. Since it doesn’t have classes, it doesn’t have class inheritance. While some (most notably the aforementioned guru) choose to embrace JavaScript’s native prototype paradigm, it’s always seemed somewhat half-baked to me. I have researched and used a number of patterns for creating class-based inheritance in JavaScript, going so far as to write my own. But TypeScript takes it a step further, defining a class keyword for defining classes:

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

class BetterGreeter extends Greeter {
	greet( name ) {
		return "Hello, " + name + ". " + this.greeting;
	}
}

The TypeScript compiler outputs a standardized class that enables simple and effective inheritance:

    var Greeter = (function () {
        function Greeter(message) {
            this.greeting = message;
        }
        Greeter.prototype.greet = function (name) {
            return "Hello, " + this.greeting;
        };
        return Greeter;
    }());

    var BetterGreeter = (function (_super) {
        __extends(BetterGreeter, _super);
        function BetterGreeter() {
            _super.apply(this, arguments);
        }
        BetterGreeter.prototype.greet = function (name) {
            return "Hello, " + name + ". " + this.greeting;
        };
        return BetterGreeter;
    }(Greeter));

The best part of features like class in TypeScript is that you can target different EcmaScript versions - if all of your target browsers supports ES6 natively, you can compile for that and use the native features. Which brings me to the next bit of awesomeness.

ES6+ features on every browser

ES6 is the current generation of JavaScript, and comes with a long list of features that are new to long-time JavaScript developers like myself. One huge benefit of TypeScript is the ability to use many features of ES6 even in older browsers (IE8, anyone?). TypeScript’s roadmap includes continuing to support future versions of EcmaScript, letting developers use them even before most browsers support them natively.

Increasing support in JavaScript frameworks

Lest you think that TypeScript is a Microsoft-only show, Angular 2 is actually written in TypeScript, and is 100% supported in the framework. Other frameworks like ReactJS and Marionette can be used alongside TypeScript.

Not-so-awesomeness

Compilation

Obviously, this is the first conceptual hurdle one must clear when contemplating TypeScript. However, these days, a lot of web development has a compilation, minification, or packaging step. TypeScript’s compilation just adds a little more time to that step.

Typing puzzles

More than once in the past year I have found myself at the end of several hours of trying to figure out just how to express the types I desire in the right way. This becomes particularly difficult when you want to pass around a constructor and use it to create an object. A lot of what you can do in JavaScript is hard to think about in terms of types; processing these patterns is the price you pay for knowing what type is being used where.

Rapid change

TypeScript is still very much under rapid development, and tools tend to lag behind the official releases. Like any evolving standard, keeping up to date can be challenging.

The future of JavaScript is now

EcmaScript5 and EcmaScript6 are now realities, and their features are incorporated into the most recent releases of modern browsers. If you are like me and still need to support legacy browsers, don’t let that keep you from learning the new standards. TypeScript is a great way to start utilizing them even now. In addition, you can begin to utilize static typing to help make your code more reliable. Happy scripting!