Working with TypeScript Source

Syntax Highlighting

Extensive syntax highlighting improves the readability of your TypeScript code, allowing you to quickly spot elements and greatly improve the overall coding experience. As a result of our broad understanding of TypeScript, you get comprehensive highlighting with unique coloring based on semantics.

The colors for syntax highlighting can be customized globally using the Windows>Preferences>TypeScript>Syntax Coloring page.

Intelligent Content Assist

The ability to quickly code with content assist is a must for the modern developer. If you use TypeScript, our node module management automatically installs npm for you and gives module-aware content assist to speed the development process. 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.

To modify the content assist auto activation/delay, select Window>Preferences>TypeScript>Content Assist.

Navigation

Working with your TypeScript source is completely manageable thanks to a variety of navigation tools.

Outline View

The ability to easily visualize elements in your code provides a nice way to navigate your project. Use the Outline view to clearly see the structure of a file in its entirety. To use the Outline view or the Quick Outline, press Ctrl+O and then type to filter the elements shown.

Simply click an element in the outline to jump to that section in your code.

Occurrence Highlighting

Click a variable or method in a file to view all occurrences of the selected item within the file. Combine this feature with the Outline view for a nice way to visualize and navigate code.

Jump to Declarations

A reliable Open Declaration option is a real timesaver for the modern developer. To jump to declarations within the editor, press the Ctrl key while hovering over source, press 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 Smarts

The TypeScript editor also has a few Angular 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

Quickly format either highlighted sections or the entire TypeScript file. Get proper indentation of your code with a simple click of the mouse.

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

To select formatting preferences, select Windows>Preferences>TypeScript>Formatter. You can override the formatter settings on a per project basis as well.

Validation

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 is automatically performed as files are added, removed and saved in your TypeScript project. Validation is both at the in-editor level as well as across your project and validates huge projects in seconds.

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.

Source Refactoring

Like Java refactoring in Eclipse, inline and rapid refactoring support for code is critical to keeping projects clean and readable. Maybe you’ve avoided renaming in TypeScript, or done it the hard way due to a mistrust of Eclipse’s rename refactoring capabilities. Don’t let your code get ugly, or worse, require extensive comments! Finally, there is refactoring you can trust with accurate rename refactoring for variables and functions throughout your entire project. To rename an element, right-click on the element in the editor and select Rename or press Alt+Shift+R.

TypeScript support was introduced in version 2016 CI 6.