Angelo Zerr Interview

TypeScript compiler for Eclipse — The whys and the hows

Dominik Mohilo
Angelo Zerr

We talked to Angelo Zerr, Eclipse E4 CSS Engine creator, Eclipse Nebula committer and Eclipse WTP Incubator committer, about the TypeScript compiler for Eclipse, its advantages and the features that are included in this new plug-in, as well as the ones that may be implemented in future releases.

JAXenter: Congratulations for your new TypeScript compiler for Eclipse. This is, (aside from TypEcs and Eclipse TypeScript) the third TypeScript plug-in for Eclipse. Can you tell us why you developed this new plug-in?

Angelo Zerr: First of all, I am the author of AngularJS Eclipse —it is based on which consumes the fantastic JavaScript inference engine tern.js with Node.js inside Java context. Tern IDE (an Eclipse plug-in) uses already, but other IDEs could also consume JBoss Tools, MyEclipse, Liferay IDE, Zend Studio have integrated in their product and they contribute to, that’s why works very well today, thanks to those impressive guys!

A lot of people ask me “how to support Angular2?” with AngularJS Eclipse. Angular 2 uses TypeScript (even if you could use ES5, ES6 code, it is recommended to use TypeScript) and the configuration of an Angular2 project is done with a (or several) tsconfig.json.

So I have studied how to do that with ternjs; ternjs is based on acorn (a powerful JavaScript parser) which is able to parse ES6 code, but it is also very expandable. Today there is an extension for JSX with acorn-jsx so I have tried to do the same thing for TypeScript with tern-typescript but it’s a very hard project, and I have lost my motivation.

VSCode is awesome – it supports TypeScript like a charm!

While studying how to support TypeScript with ternjs, I have discovered the awesome VSCode which supports TypeScript like a charm. After studying the code, I discovered that VSCode consumes tsserver to provide completion, hover, validation, etc for TypeScript inside VSCode editor. tsserver consumes TypeScript Service Language API which uses tsconfig.json files. If VSCode does that, why couldn’t Eclipse do it as well?

My first thought was to try the two existing Eclipse TypeScript plug-ins: TypEcs and Eclipse TypeScript, but they don’t consume tsserver. Compiler options are done with an Eclipse preference, and even if TypEcs starts to support tsconfig.json, it doesn’t support the full features such as “exclude” and “files” JSON properties declared in the tsconfig.json file which defines the compilation context of the TypeScript project. TypEcs and Eclipse TypeScript define their own bridge between Java and TypeScript Service Language API, so it is very hard for the user to choose the TypeScript version. You need to recompile the bridge plug-in to update the TypeScript version.

As tsserver is provided when you install TypeScript, it’s very easy for any IDE to choose your version of TypeScript just by installing it with “npm install typescript”.

VSCode provides a great support for TypeScript and it’s easy to change the version of TypeScript. Another reason why I love VSCode is that it is very, very fast: I have never seen a freeze when a big TypeScript file is opened. TypEcs and Eclipse TypeScript freeze Eclipse IDE when you open a big TypeScript file. So I have studied why VSCode is so fast:

  • VSCode uses Promise to support completion, hyperlink, hover, validation, etc: it means, for instance, that completion is executed in async. If tsserver doesn’t return the response, the completion displays “Loading…” and doesn’t freeze the editor.
  • features of the editor like syntax coloration, folding don’t use AST which means computing may take some time. Syntax coloration is done with textmate and if the file is very big, there may be problems; the coloration is done once the textmate grammar is done.

That’s why I have decided to try the same integration inside Eclipse with

  • it provides the fastest TypeScript Editor even when the file is big. When you open a TypeScript file, the AST is not loaded, syntax coloration is done with Eclipse ITokenScanner and folding is done by using indentation (like VSCode). Freeze should not occur (I hope).
  • it consumes the tsserver with async mean (just like VSCode). The only problem today is that Eclipse completion cannot be done with async. More consuming tsserver gives you the capability to configure your TypeScript version.

JAXenter: And what are the advantages in comparison with the others plug-ins?

Angelo Zerr: First of all, you can read Why TypeScript IDE to learn why I have decided to create my own TypeScript Eclipse plug-in. The main differences are:

    • integrate TypeScript like VSCode:
      • by consuming tsserver to support tsconfig.json and benefit from fixes of tsserver.
      • having a fast editor when a big TypeScript file is opened
      • also provides a JavaScript (Salsa) editor since tsserver also supports JavaScript. I think tsserver could replace ternjs once it will be more extensible to develop your own plug-in. You can see in this TypeScript issue a very impressive demo with Angular 2:zerr1

Once tsserver is extensible, will able to benefit from having completion for Angular 2 inside templates like the ones WebStorm provides, and we could develop our own plug-in for other features.

  • TypeScript out of box: in other words when you install you can benefit from TypeScript completion, validation, etc and compilation without installing node.js or TypeScript, because provides

This feature can come in handy if a company doesn’t want to install node.js , npm, TypeScript for each developer’s computer. You must install, but you can use your system node.js or a custom TypeScript bundle if you wish.

JAXenter: Which Eclipse Neon features are used for your plug-in?

Angelo Zerr: can be consumed in Java context and provides an Eclipse plug-in called TypeScript IDE. It requires Eclipse WTP because:

  • the TypeScript editor is based on some feature of JSDT like syntax coloration to avoid the reinvention of the wheel; also because JSDT is now very active (called JSDT 2.0.0)
  • Eclipse Neon will provide an Eclipse WTP JSON Editor which is extensible with a JSON Schema. uses it to provide an editor for tsconfig.json, tslint.json to provide completion.zerr4

JAXenter: Speaking of your plug-in, what features are you currently working on?

Angelo Zerr: I have implemented several features such as:

JAXenter: And what features would you like to implement in future releases?

Angelo Zerr: doesn’t provide (yet) features other than existing Eclipse TypeScript plug-ins. So I would like to provide refactoring, call hierarchy, open type, etc.

But the exciting feature that I would like to implement is the Angular2 Eclipse. Once I release (I hope in one month) and once this TypeScript issue is implemented, we could provide a very interesting Eclipse plug-in for Angular 2. My other idea is to integrate angular-cli to generate Angular 2 project, component, etc with Eclipse.

I hope will please a lot of TypeScript and Angular 2 developers and that JBoss Tools, MyEclipse guys will want to integrate this project inside their product and we could work together to improve it. Eclipse Neon will provide a debugger for JavaScript (so TypeScript is part of my plans) and Webclipse (a product of MyEclipse) already provides a debugger for TypeScript.

Any contributions are welcomed!

Thank you very much!

Dominik Mohilo
Dominik Mohilo studied German and sociology at the Frankfurt University, and works at S&S Media since 2015.

comments powered by Disqus