Angular 2 and ES-next — Part 1

K
2 min readDec 1, 2015

--

I see a lot of Angular 2 examples using TypeScript and a few of them using ES5. I don’t see too many examples using ES6/7. Hopefully before long the Angular 2 documentation will be updated to show ES6+ samples as it works great with either.

As I see it, you have these significant options if you want to write an Angular 2 application today (or perhaps, tomorrow):

  • ECMAScript 5 (ES5)
    Barring the use of getters and setters, even IE8 can run ES5 code with shims. All of the tools out there today should understand how to highlight or give some amount of completion for ES5. ES5 is also the least convenient/elegant and requires more code to accomplish the same task.
  • TypeScript (TS)
    TypeScript is a “typed superset of JavaScript” made by Microsoft. Visual Studio has excellent integration and intellisense support for TypeScript and Microsoft is pushing it pretty hard along with their collaboration with the Angular 2 team at Google. TypeScript has its own set of ES6/7 features that it supports, and more are on the roadmap.
    Recent updates may solve some of the initial problems I had getting bleeding-edge Angular 2 TypeScript to work on VS2015.
  • ECMAScript 6 (ES6 / ES2015)
    As of VS2015, Visual Studio users just recently got an update that allows them to use ES6 without red squiggles and syntax errors, as well as intellisense support. WebStorm, Sublime Text, Vim and so on have enjoyed support for ES6 for much longer. Browser vendors have already committed to implementing ES6 so it should be a very safe bet to start writing ES6 code today using babel or traceur.
    ES6 doesn’t include decorators or class properties so you’ll need to “de-sugar” these examples if you stick to pure ES6.
  • ECMAScript 7+ (ES7 / ES2016)
    Users stuck with Visual Studio will not enjoy any support for ES7 today aside from syntax highlighting. WebStorm has done an excellent job supporting features like decorators and class properties, though. ES7 Angular 2 code will very closely resemble that of TypeScript, with the exception of the type annotations.
    As ES7 comes closer on the horizon, browsers and tooling will surely follow.

Of course, you could also write your code using Google’s Dart or any number of other languages that transpile to JavaScript — but I’d like to focus on ES6 and ES7 and how many of the examples out there today translate into ES-of-tomorrow. I’ve seen little evidence that TypeScript will become part of the ECMAScript standard, and a lot of evidence that it may not (ie: ES4 tried it, many are against it). I think having relevant examples that stick with standards but utilize the latest language features is important for the Angular 2 community. It also helps to have an understanding “under the hood” on the code that is actually running in the browser.

In part 2 I plan to show some comparisons between Angular 2 code written in ES6/7 versus TypeScript.

--

--

K

Technology enthusiast, native speaker of JavaScript and C#.