New and Noteworthy 1.0.0

New and Noteworthy 1.0.0

Here's a list of the most noteworthy things in the typescript.java 1.0.0 release which is available for download since 23/08/2016. You can see issues for 1.0.0.

Editor features

typescript.java uses the JSDT Editor to support TypeScript, JSX, (and JavaScript with Salsa) by consumming tsserver coming from TypeScript bundle.

Completion

Here a demo with TypeScript completion:

Hover

Hyperlink

Code Folding

TypeScript editor content can be folded. For having good performance, the folding strategy doesn't use the TypeScript AST (to fold function, etc) but fold the code according the indentation (like VSCode):

Formatting

You can format your TypeScript code with Ctrl+Shift+F or use the menu Source/Format. The formatting behaviour is done by calling format command of the tsserver. If you find a bug, with formatting, please check with VSCode if it has the same problem.

Preferences

By default, editor and formatter options uses the default config of tsserver. But if you wish you can configure editor and formatter options for TypeScript editor with TypeScript / Editor / Formatter project preferences:

Mark Occurrences

When you select a variable, method, type, etc, TypeScript editor is able to mark occurrences:

Please note that mark occurrences is done asynchronously in order to avoid freezing Eclipse. It means that with a big project, the mark occurrences doesn't work as long as tsserver is not initialized.

Find References

You can find references (for a method, property, etc) in project with Ctrl+Shift+G or use the menu References/Project

Please note that today it exists a bug when tsserver is not started, search returns none result. Please do Ctrl+Shift+G several times by waiting fix for issue 46.

Outline

Outline View

Standard Outline is filled with TypeScript elements:

Please note that this outline is filled asynchronously to avoid freezing Eclipse. For large project, this outline can takes time.

Quick Outline

You can search quickly classes, methods, etc with the Quick Outline available with with Ctrl+O or use the menu Navigate/Quick Outline.

Please note that this quick outline share the same TypeScript elements than Outline. It is filled when Outline is filled.

Navigator Explorer

Generally, when you compile TypeScript a app.ts file, it generates app.js and app.js.map files. The Navigator Explorer displays the 3 files in the same hierarchy:

TypeScript Compiler

TypeScript IDE provides 2 means to compile ts files :

• with a launch Run As -> Compile TypeScript.
• compile/build on save when ts file is saved.

With a Launch

If you select tsconfig.json, you can do Run As -> Compile TypeScript to execute tsc with the given TypeScript project to compile ts files:

If you wish to use watch mode with tsc, you can add watch property in the tsconfig.json:

Please note that watch mode doesn't work if you add new ts file. You need to stop the process and restart it.

On save

If your project is a TypeScript project, you must enable Compile on save? from the project properties TypeScript/Compiler:

This action adds the TypeScript Builder to your project:

After that you need to activate Project / Build Automatically:

to execute TypeScript Builder when any ts files are saved.

Compile on save

Compile on save means compile ts file which is saved.

Here a demo with compile on save:

Build on save

Build on save means compile the whole ts file of tsconfig.json when a ts file (which belongs to tsconfig.json) is saved. Pay attention, it can be slow, but if you use "outFile" inside your tsconfig.json, it can be helpful.

Here a demo with build on save:

Project Explorer

Content - TypeScript Elements

If you use Project Explorer, you can see the compiled files app.js and app.js.map inside the app.ts:

This behaviour comes from that TypeScript Elements content is checked (only available for Project Explorer). You can disable it, by configuring the Project Explorer with Custom View menu:

And select Content tab:

Filters

You can hide the app.js and app.js.map which are hosted in the same folder than app.ts:

To do that, you must check the TypeScript filter (available with the Custom View menu):

TypeScript Resources

When your project follows the TypeScript Nature rule, the Project Explorer displays the TypeScript Resources node:

See Build Path for more information.

TypeScript Config Editor

Eclipse Neon provides a WTP Eclipse JSON Editor which can be extended with JSON Schema to provide custom completion.

If you have install JSON Editors with Eclipse Neon

you will have an editor for tsconfig.json

Completion

Here a sample with completion for tsconfig.json:

Configure Node.js

When you install TypeScript, you can benefit with:

• a TypeScript server tsserver which consumes TypeScript Language API to provide services like completion, validation, hover, hyperlink for TypeScript files.
• a TypeScript compiler tsc to compile *.ts/*.tsx files to *.js/*.js.map files.

Those 2 command requires node.js. TypeScript IDE gives you the capability to use:

• the embedded node.js (by default) if you don't want to install node.js
• or choose your installed node.js.

Configure TypeScript

TypeScript IDE provides:

• a server with tsserver for completion, hyperlink.
• a compiler with tsc to compile *.ts/*.tsx files to *.js/*.js.map files.

You can use

• the embedded typeScript bundle.
• or choose your typescript bundle (that you can download with npm install typescript in your project).

Server

Compiler

Please see TypeScript Compiler section for more information.

Configure Build Path

If you wish to :

• validate your ts files when you save your editor.
• compile your ts files.

Please see Build Path section for more information.