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.
TypeScript support was introduced in version CI 6 of MyEclipse and Webclipse.
What is TypeScript?
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)
Method 2—Add TypeScript support action (Project context menu>Configure>Convert to TypeScript Project…)
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
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.
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
All *.ts/*.tsx files will be compiled into corresponding *.js files and placed in the specified output folder.
tsconfig.json property: compilerOptions/outDir
tsconfig.json property: compilerOptions/outFile
Let’s go over a few key properties.
tsconfig.json property: compilerOptions/target
Possible values: es3, es5, es6/2015
Module Code Generation
tsconfig.json property: compilerOptions/module
Possible values: none, commonjs, amd, system, umd, es6/2015
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
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.)
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.
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.
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.
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
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 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.
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.
Setting Save Actions for the workspace
To select Save Actions for a project, select the project and then select File>Properties>TypeScript>Save Actions.
Setting Save Actions for the project