TypeScript support was introduced in version CI 6 of MyEclipse and Webclipse.
Enabling TypeScript Support
TypeScript support is enabled for any project that contains a tsconfig.json file in the root folder.
(For more about TypeScript project configuration, go to https://www.typescriptlang.org/docs/handbook/tsconfig-json.html.)
There are 3 ways to get TypeScript support:
- Create tsconfig.json manually
- Add TypeScript support from project properties
- Add TypeScript support from project configuration
Adding TypeScript Support from Project Properties
To add the TypeScript facet to the project’s properties, right-click on the project name, select Properties>Project Facets and then select TypeScript as the Project Facet.
To customize the tsconfig.json file configuration, click the Further configuration available… link.
The following settings are available:
Target—Specifies the ECMAScript target version: ES3 (default), ES5, or ES6.
Module—Specifies module code generation: none, CommonJS, amd, system, umd, ES6, or es2015.
Module Resolution—Determines how modules get resolved. Either node for Node.js/io.js style resolution, or classic (default).
Note: See Module Resolution documentation for more details.
Compile all TypeScript files upon saving—If selected, the compileOnSave option is added with a true value.
Adding TypeScript Support from Project Configuration
To add TypeScript from your project’s configuration, right-click on the project name and select Configure>Add TypeScript Support. The following wizard allows you to modify the tsconfig.json file:
The following settings are available:
Target—Specifies the ECMAScript target version: ES3 (default), ES5, or ES6.
Module—Specifies module code generation: none, CommonJS, amd, system, umd, ES6, or es2015.
Module Resolution—Determines how modules get resolved. Either node for Node.js/io.js style resolution, or classic (default).
Note: See Module Resolution documentation for more details.
Compile all TypeScript files upon saving—If selected, the compileOnSave option is added with a true value.
Creating a New TypeScript File
Use the dedicated wizard for creating new TypeScript files.
Using the TypeScript Editor
The dedicated TypeScript editor includes the following features:
- Syntax coloring
- Code formatting
- Content assist
- Validation
- Spell checking (comments and string literals)
Customizing Syntax Coloring
To customize TypeScript syntax coloring, select Preferences>Webclipse (or MyEclipse)>TypeScript>Syntax Coloring.
Customizing Code Formatting
To customize TypeScript code formatting, select Preferences>Webclipse (or MyEclipse)>TypeScript>Formatter.
Customizing Content Assist
Content assist is included for TypeScript files:
To configure automatic content assist activation, select Preferences>Webclipse (or MyEclipse)>TypeScript>Content Assist.
Customizing Validation
The following types of validation are available for TypeScript:
- Manual and Build validation
- “As you type” validation
Manual and Build Validation
To manually validate TypeScript files, right-click the project and select Validate.
To configure the TypeScript Validator, right-click on the project name and select Validation.
“As you type” Validation
TypeScript validation is also enabled as you edit the file. This validation does not require the file to be saved.
Spell checking
You can spell check comments and string literals in TypeScript source files. To configure spell checking, select Preferences>General>Editors>Text Editors>Spelling.
Compile on Save
Support for Compile on Save can be enabled by adding the compileOnSave property to the tsconfig.json file:
If compileOnSave is set to true then TypeScript files will be compiled automatically when any file is modified and saved. Compiler options defined in tsconfig.json are used during compilation process.
TypeScript Outline
The Outline view and Quick Outline are available for TypeScript files:
Go to Definition
Use the following methods to open the definition of a selected element:
- Press Ctrl (Cmd) and hover over an element
- Right-click an element and select Open Definition
- Select an element in the editor and press F3