ECMAScript 6/7 on the JVM with TypeScript and Vert.x

Fol­low­ing the lat­est re­leases of Vert.x 3.2 and vertx-​lang-typescript 1.1.0 I fig­ured it would be a good idea to give you a cou­ple of ex­am­ples how team­ing Vert.x and Type­Script helps you use EC­MAScript 6 and 7 fea­tures on the JVM today.

The vertx-​lang-typescript li­brary adds Type­Script sup­port to Vert.x 3. Type­Script is a typed su­per­set of JavaScript that com­piles to plain JavaScript. It sup­ports the EC­MAScript 6 (EC­MAScript 2015, ES6) stan­dard and also a few parts of EC­MAScript 7 (ES7) al­ready.

The li­brary au­to­mat­i­cally com­piles Vert.x ver­ti­cles writ­ten in Type­Script to JavaScript and ex­e­cutes them on the JVM. vertx-​lang-typescript also pro­vides type de­f­i­n­i­tions for the Vert.x JavaScript API. Use them in your favourite Type­Script ed­i­tor/IDE to get auto-​completion, API doc­u­men­ta­tion and mean­ing­ful error mes­sages. See the fol­low­ing screen­cast:

ECMAScript 6/7 and Vert.x

Below you find an ex­am­ple ver­ti­cle writ­ten in Type­Script. Well, I left all the TypeScript-​specific parts out. In fact the ver­ti­cle is valid EC­MAScript 6 (ex­cept for the last snip­pet [9] which is EC­MAScript 7).

First, fol­low the vertx-​lang-typescript README to in­stall the li­brary and to en­able Type­Script in Vert.x. Then ex­tract the type de­f­i­n­i­tions (vertx-lang-typescript-1.1.0-typings.zip) into a new di­rec­tory. Cre­ate a new file named es7verticle.ts in this di­rec­tory and copy the code below into it. Fi­nally, open your com­mand prompt and ex­e­cute

vertx run es7verticle.ts

This will run a small HTTP server that lis­tens to re­quests on port 8080. If you open your browser and go to http://lo­cal­host:8080 you will see the fol­low­ing:

So far so good. Now let’s have a look at the code. I num­bered the in­di­vid­ual EC­MAScript fea­tures used. Here’s a com­plete list:

1. Use an arrow func­tion to cre­ate a re­quest han­dler (ES6)
2. Block-​scoped vari­ables do not pol­lute your global name­space (ES6)
3. Spec­ify a de­fault value for a func­tion pa­ra­me­ter (ES6)
4. Use rest pa­ra­me­ters to col­lect mul­ti­ple pa­ra­me­ters in an array (ES6)
5. Spread the con­tents of an array to func­tion pa­ra­me­ters (ES6)
6. It­er­ate over array con­tents using the for…of loop (ES6)
7. tem­plate strings en­able string in­ter­po­la­tion and multi-​line strings (ES6)
8. Use classes and in­her­i­tance (ES6)
9. Use the new ex­po­nen­ti­a­tion op­er­a­tor as a short­cut for Math.pow() (ES7)

Conclusion

The ex­am­ple demon­strates very well how you can use EC­MAScript 6 (and parts of 7) on the JVM today. In fact, there are a lot more cool ES6 fea­tures not in­cluded in the ex­am­ple such as con­stants (const), the prop­erty short­hand or method prop­er­ties.

Type­Script is so much more than just ES6. It ac­tu­ally has a very good sta­tic type sys­tem that al­lows you to make compile-​time type checks. This is makes it much eas­ier to write large Vert.x ap­pli­ca­tions with many ver­ti­cles. Per­son­ally I re­ally like the sup­port that I get from my IDE when pro­gram­ming Type­Script. Since vertx-​lang-typescript comes with type de­f­i­n­i­tions for the Vert.x JavaScript API I get auto-​completion and ac­cess to the doc­u­men­ta­tion right in the ed­i­tor. I mostly use Sub­lime by the way, but I have tested it suc­cess­fully with Vi­sual Stu­dio Code, Eclipse and Atom.

Un­for­tu­nately, the only ES7 fea­ture that you can use at the mo­ment with vertx-​lang-typescript is the ex­po­nen­ti­a­tion op­er­a­tor. Type­Script 1.7 also sup­ports dec­o­ra­tors but this fea­ture is dis­abled at the mo­ment in vertx-​lang-typescript be­cause it is ex­per­i­men­tal and sub­ject to change. I’ll keep you up to date when new fea­tures are in­tro­duced.

Alternatives

We’ve re­cently pub­lished a post on how to use EC­MAScript 6 with Vert.x here on this blog. We used Babel, a com­piler that trans­lates ES6 to ES5.

Al­though this ap­proach works well it is a bit harder to set up and use than the one pre­sented here. First, you need to wrap your Vert.x ap­pli­ca­tion in a NPM pack­age. Sec­ond, in order to run your ap­pli­ca­tion, you need to ex­e­cute two com­mands. You have to com­pile it with npm run build and then then call npm start. With vertx-​lang-typescript you only need one com­mand. vertx-​lang-typescript also al­lows you to embed the Type­Script ver­ti­cle in a larger Vert.x ap­pli­ca­tion and also mix mul­ti­ple lan­guages in one project. This is not pos­si­ble if you wrap every­thing in a NPM pack­age.

Fi­nally, the ap­proach based on Babel only sup­ports EC­MAScript 6 (2015), al­though more fea­tures from ES7 will surely be in­tro­duced in Babel in the fu­ture. Type­Script on the other hand gives you much more fea­tures such as sta­tic typ­ing that you will cer­tainly find use­ful for any larger project.