Using TypeScript

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. It offers constructs like classes, interfaces, generics, and even modules and namespaces, helping you write robust, maintainable code.

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—you can use existing JavaScript code, incorporate popular JavaScript libraries, and call TypeScript code from JavaScript. For more on TypeScript, refer to the TypeScript Handbook.

TypeScript Projects

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.

tsconfig.json

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.

tsconfig.json Editor

Refer to the TypeScript documentation for configuration details and examples, as well as a list of compiler options.

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

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 

Peek Definition

Press 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

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

Quick Fixes

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.

Refactoring

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

Outline & Navigation

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

Press 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:

• editor.formatOnSave
• tslint.autoFixOnSave
• typescriptHero.imports.organizeOnSave

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.

Quick Fixes for TSLint

TypeScript Language Validation & Transpilation

Through our advanced build pipeline support, your TypeScript files are validated by both the language smarts in the IDE, as well as an external tsc compiler, if you so choose. tsc can also be used to transpile your TypeScript into JavaScript. Please read our documentation on Build Pipelines for more details.