An Introduction to TypeScript: Static Typing for the Web

“Oh, I’m using Gulp because of reason A” or “Oh, I’m using Redux because of reason B”. You hear these sorts of things from front-end developers all the time. It’s become fashionable to use new ways of improving on JavaScript’s old faults and that’s not a bad thing; even ES2015 has been a pretty determined attempt at righting those wrongs and it’s currently the official version of the language.

One of those attempts at creating a better experience with JavaScript, which we'll dive into here, is TypeScript. It's a promising change to our favorite language that’s likely to make a bigger splash in JavaScript’s future.

What Exactly is TypeScript?

TypeScript is a strongly-typed superset of JavaScript, which means it adds some syntactical benefits to the language while still letting you write normal JavaScript if you want to. It encourages a more declarative style of programming through things like interfaces and static typing (more on these later), offers modules and classes, and most importantly, integrates relatively well with popular JavaScript libraries and code. You could think of it as a strongly static layer over current JavaScript that has a few features to make life (and debugging especially) a bit more bearable.

The reason it’s gained such attention of late, though, is largely because it’s been selected for full support by the upcoming Angular 2 (which is also written in TypeScript itself). It's also developed by Microsoft, which means it has the backing of two major tech companies (not a bad place for any language). This means that we’ll probably be seeing a lot more about it in the months and years to come, and it will likely gain even more of a following and mainstream status in that time.

Needless to say, TypeScript is definitely worth looking into.

How Does it Work?

TypeScript actually looks much like modern JavaScript. At the most basic level it introduces a static typing paradigm to JavaScript, so instead of the following:

var name = “Susan”,
    age = 25,
    hasCode = true;

We could write the following:

let name: string = "Susan",
    age: number = 25,
    hasCode: boolean = true;

As you can see there’s not a whole lot of difference here. All we’re doing is explicitly telling the system what type each variable is; we’re telling it from the get-go that name is a string and age is a number. But that just seems like we have to write more code. Why bother telling the system such specific information? Because it gives the system more information about our program, which in turn means it can catch errors that we might make further down the road.

Imagine, for instance, you have something like this in your code:

var age = 25;
age = "twenty-five";

Mutating a variable like this and changing its type will likely end up breaking stuff somewhere else, especially in a really big program, so it’s great if the compiler can catch this before we load this up in our browser and have to sit for half an hour looking for the issue ourselves. Basically, it makes our program safer and more secure from bugs.

There’s more, though. Here’s an example from the TypeScript website intro tutorial (which you can find here):

Continue reading %An Introduction to TypeScript: Static Typing for the Web%

by Byron Houwens via SitePoint