facebook
Webclipse

Using TypeScript

This guide steps you through the setup of TypeScript support prior to MyEclipse version 2021.5.24 and gives an overview of the editing features available for TypeScript files. 

Back to Learning Center

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.

PropertiesFor

To customize the tsconfig.json file configuration, click the Further configuration available… link. 

ModifyFacetedProj

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:

AddTSSupport

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.

NewTSFile

TSSourceClass

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)

fileTS-syntax

Customizing Syntax Coloring

To customize TypeScript syntax coloring, select Preferences>Webclipse (or MyEclipse)>TypeScript>Syntax Coloring.

PrefTSSyntx

Customizing Code Formatting

To customize TypeScript code formatting, select Preferences>Webclipse (or MyEclipse)>TypeScript>Formatter.

PreTSFormatter

Customizing Content Assist

Content assist is included for TypeScript files:

fileTS-CA

To configure automatic content assist activation, select Preferences>Webclipse (or MyEclipse)>TypeScript>Content Assist.

PrefTSCA

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.

FileTSProblems

To configure the TypeScript Validator, right-click on the project name and select Validation.

ProperitesForValidation

“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.

PrefSpelling

Compile on Save

Support for Compile on Save can be enabled by adding the compileOnSave property to the tsconfig.json file:

tsconfigEdits

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:

FileTSOutline

TSQuickOutline

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