TypeScript compiler for Eclipse — The whys and the hows
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?
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.
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 typescript.java:
- 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
Once tsserver is extensible, typescript.java 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 typescript.java you can benefit from TypeScript completion, validation, etc and compilation without installing node.js or TypeScript, because typescript.java 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 typescript.java, 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: typescript.java 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. typscript.java uses it to provide an editor for tsconfig.json, tslint.json to provide completion.
JAXenter: Speaking of your plug-in, what features are you currently working on?
Angelo Zerr: typescript.java. I have implemented several features such as:
- a TypeScript editor with completion, hover, hyperlink, validation, format, outline, mark occurrence, and find references.
- Compilation/Build on save which consumes tsc
- JSON Editor for tsconfig.json and tslint.json
JAXenter: And what features would you like to implement in future releases?
Angelo Zerr: typescript.java 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 typescript.java (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.
Any contributions are welcomed!
Thank you very much!