Introduction to the Typescript Transpiler

Typescript is the new kid on the block, a newly attempt to bring order to the javascript chaos. ES6 is around the corner and is a fantastic step forward for frontend development (classes!) but it will take years to be fully implemented in all major browsers. That’s when Typescript comes to the rescue. Typescript goal is to be a superset of ES6 that, in addition to all the new stuff that the standard is defining, will add a static type system. Typescript has also a transpiler that converts our Typescript code (i.e. ES6 + types) to ES5 or ES3 javascript code so we can use it in today browsers.

Having a type system means that our code is much more maintainable, less error prone, and that our IDEs will become more intelligent because of static analysis and code completion. Other attempts have been made in the past to overcome javascript deficiencies, being Coffescript the most well known, but those languages had a major flaw: you have to learn a completely new language. Typescript took another approach and didn’t reinvent the wheel, all javascript code is in fact typescript code, every new feature of typescript is optional. It means that the learning curve is very soft and that we can implement new features in our code incrementally. Way to go Microsoft!

Installing Typescript

First things first, we need to install typescript in our computers, so we use npm to install it globally.

Although the package is called typescript, the command that executes the transpiler is called  tsc . Because typescript is in constantly development we need to make sure of the version that we are using.

Currently I’m using typescript 1.4.1, the latest stable release. When I stated that typescript is a superset of ES6 i lied a little, because version 1.4 lacks some of the features present in ES6, however, typescript 1.5 will close that gap and will add more unique features like annotations.

Transpiling Code from Typescript to Javascript

Ok now that we have the typescript transpiler installed in our machines, is time to use it. Lets create our first typescript file and use some of the new features of ES6. We wil call the file “person.ts”. Don’t forget to use .ts extension.

We are using the new class syntax definition from ES6 using typescript so the next step is to use the transpiler to obtain javascript code.

The transpiler creates a new file called “person.js” with the javascript code.

So now we have the same Person class implemented with the classical convoluted javascript code that we can use in our browsers or in node.

Changing Javascript Target

Let’s add a new property to our class, this time a private one that it’s only available through an accessor.

And use the transpiler again to obtain the javascript counterpart.

An error? What just happened? It turns out that the proper way to define an accessor in javascript is using   Object.defineProperty() that is only available in ES5 and onward, but as default, the transpiler tries to create ES3 code. To overcome this problem we have to tell the transpiler that it should target ES5 and not ES3.

Now it works! The transpiler creates a new person.js file, overwriting the old one.

It’s possible to instruct the transpiler to create ES6 code but it’s not really useful right now because ES6 does not have wide support among browsers and because there’s another fundamental problem: It doesn’t work.

Let’s try to use he same code and use the transpiler to create ES6 javascript code.

And this is what we get in return:

The exact same result that when using ES5 as target. That’s a very odd behavior considering that ES6 defines classes with constructor and getters so the typescript code shown before should be considered a valid ES6 javascript code. The transpiler should have only trimmed the type definitions and changed the file extension to “.js”. Maybe because ES6 is not formally ready, the typescript team is still working on the implementation of the transpiler for that version of javascript.

Looking at the help file for the tsc command we can see that the target “ES6” is marked as experimental.

Watching Changes

It’s a little bit tedious to call the transpiler every time we make a change to person.ts so instead we can use a watcher to automate the process.

Going a step further, if we define a folder called “ts” for all of our typescript files, and a folder called “js” for the transpiled code, we can setup the watcher like this:

The --outDir flag tells the transpiler where tu put all the javascript files, in this case the “js” folder. Now, whenever we make a change to any file in the “ts” folder, the transpiler kicks in and creates all the associated javascript files and put them in the “js” folder.

In a next post we are going to explore how to integrate typescript into Sublime Text to obtain syntax highlighting and code completion (coming soon).

1 thought on “Introduction to the Typescript Transpiler”

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.