This page details TypeScipt support using CodeMix and Angular IDE by CodeMix. If you are using MyEclipse we recommend adding CodeMix to your installation for the latest TypeScript support. For TypeScript support without CodeMix, see this page.
What is TypeScript?
To create a TypeScript project, go to File>New>Project>CodeMix>TypeScript Project, type in a project name and click Finish.
New CodeMix TypeScript Project wizard
Keep the Enable NPM and Node version management checkbox selected when you create a project to ensure you have a fixed version of Node and NPM when working with the command line in Terminal+. These versions can be configured in Project Properties>CLI Tool Management.
This wizard creates a sample TypeScript project, including sample tsconfig.json and package.json configuration files. Alternatively, create a tsconfig.json file manually in the root of an Eclipse project to have the project recognized as a TypeScript project.
Note: Any directory containing a tsconfig.json file makes that directory the root of a TypeScript project. This allows you to define multiple TypeScript projects in a single Eclipse project.
In the absence of a tsconfig.json file, a TypeScript file is treated as an independent unit; however, if you really are dealing with multiple TypeScript files, this mode is not recommended. For more information, refer to this document.
Two primary sections that are typically configured in this file are compiler options, as well as source files that are to be included or excluded from your project configuration. Use IntelliSense (
Ctrl+Space) to help you specify additional parameters.
Note: TypeScript settings are respected as described in the tsconfig.json file, there are no additional property or preference pages on which these settings can be configured.
Creating TypeScript Files
To create a new TypeScript source file, select File>New>Other>CodeMix>TypeScript File and use the wizard to add the new file to your project.
Editing TypeScript Source
CodeMix provides built-in IntelliSense to improve your coding experience.
Content assist suggestions show up as you type, there’s no need to manually invoke the assist, though you can do so with
Ctrl+Space. When you use a suggestion to insert a class that hasn’t been imported, the import is added as well.
Documentation popups present documentation when available, including the display of parameter info, as you key-in a method’s parameters.
TypeScript content assistance
Ctrl when hovering over a field or method to peek at the definition, without having to change your editing context.
Peeking at a definition in TypeScript
Snippets reduce the time required to write common pieces of code, or even boilerplate in some cases. The snippets include placeholders which make it easy to customize the generated code.
Snippets in TypeScript
Several errors or warnings have quick fixes actions, allowing you to either click the bulb or press
Ctrl+1 to automatically fix these issues. For some issues, you can choose to fix all similar issues in the project with a single click, or disable the rule causing the warning.
Alt+Shift+R, or invoke Rename from the context menu, to invoke rename refactoring for symbols in your TypeScript source.
Renaming in TypeScript
You can also perform other refactoring such as extracting code to a method, constant, etc. Select the source code to extract, press
Ctrl+Shift+P, and then select Refactor to see available refactorings.
From the command palette, you can even organize imports by sorting them, and removing unused imports.
The Outline View displays an outline of your TypeScript source code—double-click an entry in the view to navigate to the corresponding symbol. You can also access a quick outline by pressing
Ctrl+O. You can now start typing to filter displayed nodes and quickly jump to a symbol.
Quick Outline for TypeScript
Hyperlink navigation allows you to jump between files or within them. Press
Ctrl while hovering over source to activate hyperlinks—click to navigate to that location in your source. You can also press
F3 or use the context-menu Go to Definition action.
Formatting & Save Actions
Ctrl+Shift+F or the context menu Format action to format your TypeScript source. To configure the formatter, go to Preferences>CodeMix>Settings>User Settings and type in typescript.format into the filter. Adjust the settings as desired.
Selecting TypeScript Formatter settings
You might want to perform some actions on save—on the same settings page, you can modify the following settings based on your needs:
Build and Validation
Linting with TSLint
With the in-built support for TSLint, simply configure your linting settings in the tslint.json file, and the editor will begin to display linting errors. Many errors reported by TSLint can be fixed automatically with the quick-fix functionality.