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

{
    <span class="hljs-attr">"compilerOptions"</span>: {
        <span class="hljs-attr">"strictNullChecks"</span>: <span class="hljs-literal">true</span>
    }
}

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.

<span class="hljs-keyword">let</span> name: <span class="hljs-built_in">string</span> | <span class="hljs-literal">null</span> | <span class="hljs-literal">undefined</span>;

name = <span class="hljs-literal">null</span>; <span class="hljs-comment">// OK</span>
name = <span class="hljs-literal">undefined</span>; <span class="hljs-comment">// OK</span>

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:

<span class="hljs-keyword">class</span> FortuneTeller {
    readonly secretOfLife: <span class="hljs-built_in">number</span>;
    <span class="hljs-keyword">constructor</span>() {
        <span class="hljs-keyword">this</span>.secretOfLife = <span class="hljs-number">42</span>;
    }
}

<span class="hljs-keyword">let</span> esmeralda = <span class="hljs-keyword">new</span> FortuneTeller();

esmeralda.secretOfLife; <span class="hljs-comment">// 42</span>
esmeralda.secretOfLife = <span class="hljs-number">41</span>; <span class="hljs-comment">// Error</span>

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.

<span class="hljs-keyword">interface</span> Ocean {
    readonly color: <span class="hljs-built_in">string</span>;
    readonly name: <span class="hljs-built_in">string</span>;
}

<span class="hljs-keyword">let</span> atlanticOcean: Ocean = { color: <span class="hljs-string">'blue'</span>, name: <span class="hljs-string">'Atlantic'</span> };
atlanticOcean.color = <span class="hljs-string">'red'</span>; <span class="hljs-comment">// Error</span>

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

This is interesting
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.

CSG Pro

CSG Pro

Our data analytics consultants solve problems and ignite victories. We help you understand your data so you can make smarter business decisions. We build custom software applications that strengthen your process and your team.
SHARE THIS
Share on twitter
Share on facebook
Share on linkedin
Share on email
RELATED POSTS

Subscribe

Subscribe to CSG Pro. We’ll supply your inbox with the latest blog posts, training videos, and upcoming events.

Ready to wrangle your data?