In four lines of code, here is why you should stop using JavaScript, and write every project in TypeScript:

1
2
3
4
5
6
7
interface Message {
text: string;
}
let message: Message = {
text: 'Hello, world!!'
};

Really, that’s it. There’s so much power in just those four lines of code.

TypeScript defined

Before we breakdown the above code, it’s probably worthwhile to talk a little bit about TypeScript and what it is. More importantly, let’s talk about what TypeScript isn’t.

TypeScript is not a replacement for JavaScript or ECMAScript (from here forward I’ll simply call this JavaScript), or another attempt to redefine either of those. Instead, TypeScript is a syntactical superset of JavaScript, and is transcompiled down to the version of JavaScript you desire. You use TypeScript to write JavaScript. Because TypeScript is a superset of JavaScript, you already know a large percentage of the syntax for TypeScript, as TypeScript builds upon JavaScript’s syntax.

Why use TypeScript

There are several reasons to use TypeScript. One of the biggest is to handle all the various versions of JavaScript, and features that are supported. For example, I love using async/await when writing code. However, that’s only supported in more recent versions of JavaScript, which doesn’t share wide adoption quite yet. The transcompiler for TypeScript handles down-leveling the code as appropriate, so I can write what I want, taking advantage of new features and syntax, knowing that TypeScript will manage the versioning for me behind the scenes.

More importantly to me on a day-to-day basis, though, is type checking and the ability to describe data structures. Keep in mind, of course, that TypeScript transcompiles to JavaScript, so the type checking doesn’t actually wind up in the JavaScript, and does not impact the performance. But it does make creating code much easier.

Breaking down the four lines

Creating interfaces

Let’s start with the first line:

1
interface Message { ... }

Interfaces in any programming language of course allow you to describe the structure of data or some other object. It’s a contract, and when something is declared as a type of that interface you as the developer knows what’s there. In addition, because the IDE, such as Visual Studio Code, you can get autocomplete and IntelliSense when using variables declared as the interface type.

Many JavaScript solutions call various REST services, each with their own structure for JSON documents. The ability to declare an interface can speed development by reminding you what properties are required, and ensuring they’ve all been provided.

Declaring types

Let’s bring back the entire code block:

1
2
3
4
5
6
7
interface Message {
text: string;
}
let message: Message = {
text: 'Hello, world!!'
};

You’ll notice the declarations of text: string and message: Message. By using variableName: type, we’ve told TypeScript what type we want the variable to be. This brings a couple of great advantages. The first is pretty obvious - that your IDE will let you know when you’re using it wrong. The second is by indicating the data type, your IDE can offer autocomplete or, in the case of Visual Studio Code, IntelliSense.

Don’t underestimate how important IntelliSense is. While through use and repetition, you absolutely will start to remember various property and method names. But for those edge cases where you need to call something you don’t often reach for, being able to simply hit “dot” and scroll through the list of options (often with documentation) is much more efficient than opening the docs or searching Stack Overflow.

A bit more about types and introducing Typings

In our little application, we created our own interface, so it seems only logical that VS Code would know what to do with that. But what about other packages, such as Express, Restify, or Mongoose?

For packages that are created in TypeScript, you’re covered. But for other packages, such as those listed above, which are created in some form of JavaScript, VS Code won’t be able to automatically figure out what’s available to you, thus you won’t get IntelliSense. Enter Definitely Typed.

Definitely Typed is a community that creates package.d.ts files, which contain the list of interfaces and structures provided by a particular package. These types are installable via NPM, and are almost always solely needed as dev dependencies. To install a package’s types, simply prepend the name of the package with @types/. Note that while not every package has types created, I think you’ll be pleasantly surprised at how many have been done.

As an example, here’s how you’d install the types for Restify.

1
npm install --save-dev @types/restify

Variable declaration

1
let message: Message = { ... }

When declaring our message variable, we used the keyword let. Let helps fix some of JavaScript’s odd scoping rules. In JavaScript, variables aren’t scoped to blocks, meaning the code below works, and would print the number 42. There is absolutely no reason this should work, but yet here we are…

1
2
3
4
5
if(1 === 1) {
var x = 42;
}
// WHY DOES THIS WORK?!?!
console.log(x);

By using let in TypeScript, the variable x in the above scenario would not be available outside of the if block.

The transcompiled JavaScript

In order to run our code, we will need to transcompile it into JavaScript. This is done by using tsc, which is available after installing TypeScript (which can be done via NPM).

1
tsc app.ts

The final JavaScript will look as follows:

1
2
3
var message = {
text: 'Hello, world!!'
};

All of the syntactical candy provided by TypeScript, such as the type declarations and interfaces, has been omitted. At the end of the day, when you’re using TypeScript, you’re writing JavaScript. But you’re doing so at a higher level, with a better language.

Bring it back around again

There are numerous reasons to use TypeScript. Not having to worry about versioning issues, being able to take advantage of the latest technologies, and many other features, make creating projects in TypeScript rather compelling. For me, the chief is the ability to have typed objects. It makes me a more efficient developer, and helps me spot bugs that much faster.

If you’re looking to get started, TypeScriptLang.org offers quite a bit in the way of documentation, and is well structured. It may take a little bit of getting used to the structure of TypeScript, like learning any new language, but in the long run you will find it’s a much better way of creating JavaScript.

留言