Why I Love TypeScript 2.0 And You Should Too

JavaScript has been a tremendous tool for front-end developers over the past 20 years. And with NodeJS we can leverage this powerful scripting language in new ways and on both ends of the wire. However, the more our applications are dependent on a dynamic language like JavaScript they become exponentially more fragile. TypeScript allows the developer to focus on just the block of code in front of them rather than being concerned of the entire system.

Microsoft recently released TypeScript version 2.0 of the statically typed super-set of JavaScript. With this release comes some nice enhancements which many developers have desired. As well, we got new tooling capabilities geared toward leveraging an already powerful package management system.

In this post I’ll show you some of the TypeScript 2.0 features I’m excited to start using.

Non-Nullable Types

There’s been a lot of requests for Non-Nullable types in TypeScript. These are now available through a compiler option.

To enable Non-Nullable types you will need to set the option in your tsconfig.json file or declare it via the command line.

tsconfig.json

{
    "compilerOptions": {
        "strictNullChecks": true
    }
}

command line interface

$> tsc --strictNullChecks

Non-Nullable Types allow us to restrict a variable to a specified type. Without enabling strictNullChecks we could set a variables value to null without any regard to the type defined. With this feature enabled the compiler will report an Error when it encounters a null value.

let name: string;

name = null; // Error

In order to allow a null or undefined value for the name variable we’d need to explicitly define the type as such.

let name: string | null | undefined;

name = null; // OK
name = undefined; // OK

While it isn’t a break-through feature, Non-Nullable Types are ideal when you’re building an application from the ground up or if you are coming from other statically typed languages.

readonly Properties

Readonly properties are a welcome change to the language. While we’ve been able to work around this limitation by using a getter and a private property, there was a lot of ceremony and documentation to implemented safely.

Here’s what we might have done in earlier versions of TypeScript:

class FortuneTeller {
    private _secretOfLife: number;
    get secretOfLife() {
        return this._secretOfLife;
    }
    constructor() {
        this._secretOfLife = 42;
    }
}

let esmeralda = new FortuneTeller();

esmeralda.secretOfLife; // 42
esmeralda.secretOfLife = 41; // Error

With the readonly keyword in TypeScript 2.0 we can accomplish the same goal with less code:

class FortuneTeller {
    readonly secretOfLife: number;
    constructor() {
        this.secretOfLife = 42;
    }
}

let esmeralda = new FortuneTeller();

esmeralda.secretOfLife; // 42
esmeralda.secretOfLife = 41; // Error

It’s worth pointing out that a readonly property can be set when defining the property or in the constructor, but nowhere else inside the class. This means you can’t have a method on the class set the value of a readonly property.

class Person {
    readonly fullName: string;
    firstName: string;
    lastName: string;
    setName(firstName: string, lastName: string) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.fullName = `${firstName} ${lastName}`; // Error
    }
}

In addition, you can also define interface members to be readonly.

interface Ocean {
    readonly color: string;
    readonly name: string;
}

let atlanticOcean: Ocean = { color: 'blue', name: 'Atlantic' };
atlanticOcean.color = 'red'; // Error

And since an Array is also an object you can set an entire array to be readonly by using the ReadonlyArray type.

let friends: ReadonlyArray<string> = ['Chandler', 'Joey', 'Monica', 'Phoebe', 'Rachel', 'Ross'];
friends.push('Janice'); // Error

This is interesting

type interesting = string;

function isItInteresting(this: interesting) {
    this; // typeof string
}

That’s right. We can even type this in a function signature. this will always be the first parameter in the function signature. It’s there if you need it. Read more about specifying the type of this for functions.

Conclusion

I’m really excited to start using these features and the many more available in TypeScript 2.0.