Webclipse

Using TypeScript

This guide steps you through the setup of TypeScript support and gives an overview of the powerful editing features available for TypeScript files. TypeScript support is available in our Angular IDE, Webclipse Eclipse plugin and MyEclipse Java EE IDE.

Back to Learning Center

Download Webclipse

TypeScript support was introduced in version CI 6 of MyEclipse and Webclipse.

What is TypeScript?

TypeScript is a typed superset of JavaScript that starts from the same JavaScript syntax and semantics that you are already familiar with. Use existing JavaScript code, incorporate popular JavaScript libraries, and call TypeScript code from JavaScript.

TypeScript allows you to write code using the latest JavaScript features, including those from ECMAScript 2015 and even future proposals, which then compiles to clean, simple JavaScript code that runs on any browser in Node.js or in any JavaScript engine that supports ECMAScript 3. This allows you to use the latest development frameworks and techniques without requiring your clients to have the very latest browsers or allied tech.

Beyond the ability to use the very latest JavaScript tech, the fact that TypeScript is typed allows us to provide superior content assist, refactoring and most importantly, definitive validation. These benefits can even extend into existing JavaScript frameworks.

Creating a TypeScript Project

A TypeScript project is defined by a tsconfig.json file—the presence of this file indicates that the containing directory is the root of a TypeScript project.

If you import an existing TypeScript project into your workspace, this file is detected and TypeScript support is automatically added to your project.

If you don’t already have a tsconfig.json file in your project, you can:

  • Add the TypeScript facet using either of the following methods which create a tsconfig.json file in your project, enabling TypeScript support.

    Method 1—Use the Project Facets property page and select the TypeScript facet (Project Properties>Project Facets)

    1_facet_property_page   

    Method 2—Add TypeScript support action (Project context menu>Configure>Convert to TypeScript Project…)

    2_facet_wizard
    This wizard creates a tsconfig.json file based on your selections. See the next section for a description of these properties.

  • Create the tsconfig.json file manually.

Note: We currently support only a single tsconfig.json file per Eclipse project. If there are multiple tsconfig.json files, we check for an angular-cli.json file to see if it points to a dominant configuration file. If not, we check standard folders such as src and app for precedence, before simply picking the first tsconfig.json file found. You can easily pick your own tsconfig.json file on your project’s TypeScript property page.

 

Configuring Your TypeScript Project

As mentioned earlier, the core of your TypeScript project’s configuration is the tsconfig.json file. We load and store most settings directly to this file, so if you are importing an existing TypeScript project, you don’t need to reconfigure those same settings in the IDE. Conversely, settings made in the IDE will also be respected when running TypeScript commands on the command line.

 

Core TypeScript Settings

typescriptproppage

The Path field points to the primary tsconfig.json file for your project. If you have several tsconfig.json files in your project, and you need to point our tooling to a different file, use the Browse button or simply type in the correct project relative path.

The Version section indicates the version of TypeScript being used to build your project. As of 2016 CI 8, we’ve added support for TypeScript version 2, and most projects will be compiled with TypeScript 2 by default. If we detect that your project specifically needs version 1.8 or lower – for instance, you may already have this version installed in the project, or referenced in package.json, we will fall back to TypeScript 1.8.


Build Path Settings

Settings related to source and output paths can be found on the TypeScript>Build Path property page.

typescriptbuildpath2

Observe that the path to the tsconfig.json file is mentioned at the top of the page. Let’s go over a few of these settings:


Source File List

You can specify an explicit list of files to include on the source path, or a list of folders to exclude. In the case of exclusion (or if no files property is specified), all *.ts/*.tsx files in the directory containing the tsconfig.json file and its subdirectories would be included on the source path.

tsconfig.json properties: files, include, exclude


Automatically compile TypeScript files

If enabled, when you save a TypeScript source file, we will automatically transpile it into a JS file.

tsconfig.json property: compileOnSave


Output folder

All *.ts/*.tsx files will be compiled into corresponding *.js files and placed in the specified output folder.

tsconfig.json property: compilerOptions/outDir 


Output file

If specified, all *.ts/*.tsx files will be compiled into a single JavaScript file specified by this property. This setting takes precedence over the output file property.

tsconfig.json property: compilerOptions/outFile


Compiler Settings

4_compiler

Let’s go over a few key properties.

ECMAScript Target Version
tsconfig.json property: compilerOptions/target
Possible values: es3, es5, es6/2015 
This property controls the ECMAScript level of JavaScript code that is generated by the transpiler. 

Module Code Generation

tsconfig.json property: compilerOptions/module
Possible values: none, commonjs, amd, system, umd, es6/2015
This property controls how the generated JavaScript code is modularized.

Module Resolution

tsconfig.json property: compilerOptions/moduleResolution
Possible values: node, classic
This property controls how modules get resolved. See this doc for more information.

Report an error on expressions and declarations with an implied ‘any’ type

tsconfig.json property: compilerOptions/noImplicitAny
Possible values: true, false
Setting this value to true will lead to errors being shown when the type of an element cannot be determined. If set to false, TypeScript will assume an ‘any’ type in such cases and move on with no errors, but you will lose some of the typed benefits that TypeScript provides.

Inline source map/Inline sources in source map/Generate corresponding .map files

These properties control the generation of mapping files that help with mapping between the original TypeScript source file and the generated JavaScript file. Map files are especially useful when you want to debug your TypeScript application; these files will allow you to use a JavaScript debugger, like the one we provide, with the original TypeScript files instead of the generated code.

Customizing for TypeScript 2.0

If you wish to customize your compilation, we also support newer compiler options introduced by TypeScript 2.0, though you would have to hand-edit these in tsconfig.json, for now.

Manage @type Packages

  • tsconfig.json property: compilerOptions/types
    (Specify a list of “@types” packages to include in your compilation.)
  • tsconfg.json property: compilerOptions/typeRoots
    (Only include packages under the specified directory in your compilation.)

Declare standard libraries required in the project

  • tsconfig.json property: compilerOptions/lib
    (Possible values: es5, es6, es2015, es7, … See details on the –lib argument for a complete list.)

For a detailed list of other tsconfig.json properties, please see this doc as well as this list of compiler options. You could also take a look at the schema for the tsconfig.json file directly.

 

Working with TypeScript Source

Creating a new TypeScript file

Create a new TypeScript file using the File>New>TypeScript>TypeScript Source File wizard or simply create a file with the “ts” or “tsx” extension manually.


Working in the TypeScript editor

Our TypeScript editor provides syntax highlighting, content assist and an outline view. 

5_editor

You will get content assist for all TypeScript files included in your source path as well as from referenced modules. If you’re not sure what a Module is, please see this article. Module resolution depends to a large extent on the module resolution strategy you have chosen in your project – for instance, if you are managing modules with Node.js, you may want to choose “node” as the module resolution strategy for your project. Read Module Resolution for more details.

The content assist auto activation/delay can be configured on the MyEclipse/Webclipse>TypeScript>Content Assist preference page.

The colors for syntax highlighting can be customized globally using the MyEclipse/Webclipse>TypeScript>Syntax Coloring page. 


Navigation 

To navigate within your source, you have a few options. Click through the Outline view or the Quick Outline by pressing Ctrl+O and then typing to filter the elements shown. 

6_outline_navigation

You can also jump to declarations within the editor by pressing the Ctrl key when hovering over source, pressing F3 or using the Open Declaration context menu action. Hyperlink navigation also works with TypeScript modules, in import directives – use this to quickly jump to referenced module sources.

 

Angular 2 Smarts

angularnav

The TypeScript editor also has a few Angular 2 specific features, for instance, in an Angular @Component, you can use the hyperlink navigation to easily jump to your template HTML or CSS files.

Formatting

Formatting can be done on the entire file or on a selection by pressing Ctrl+Shift+F. 

We have a number of formatting options, which can be found at MyEclipse/Webclipse>TypeScript>Formatter preference and property pages. You can override the formatter settings on a per project basis as well.

7_formatter


Validation

As we mentioned earlier, one of the benefits of TypeScript is more reliable validation due to the fact that types are often definitely known, unlike JavaScript. We provide as-you-type validation, which will add / remove errors as you type in the TypeScript editor. TypeScript validation will be automatically performed as files are added and removed and saved in your TypeScript project.

8_validation

Manual validation can always be invoked from the context menu’s Validate action on files, folders or entire projects. 

Please remember to set the noImplicitAny property to true if you wish to get stricter type validation, as you can see in the above example. You can do this in the tsconfig.json file, or use our Compiler property page as described in the tsconfig.json section.

TypeScript Save Actions

Beginning with version 2017 CI 2, you can now specify the actions to perform when a TypeScript file is saved.

The following actions are available:

  • Format source code—Applies formatting rules to the file being saved.
  • TSLint—Makes changes to the file being saved based on TSLint configurations
    • Apply all TSLint quickfixes for formatting rules—Automatically fixes all issues related to TSLint.
    • Remove unused imports—Organizes imports statements by removing all unused ones.

Configuring Save Actions

Save Actions for TypeScript can be configured for the whole workspace or per project.

To select Save Actions for the workspace, select Windows>Preferences>TypeScript>Save Actions.

saveactionsworkspace
Setting Save Actions for the workspace

To select Save Actions for a project, select the project and then select File>Properties>TypeScript>Save Actions.

saveactionsproject
Setting Save Actions for the project