RubyMine
 
2022.2
Shortcuts: Windows
Get RubyMine
You are viewing the documentation for an earlier version of RubyMine.
  1. Languages
  2. TypeScript

TypeScript

Last modified: 09 August 2022

Required plugin: JavaScript and TypeScript

The plugin is bundled with RubyMine and enabled by default.

RubyMine supports developing, running, and debugging TypeScript source code. RubyMine recognizes .ts and .tsx files and provides full range of coding assistance for editing them without any additional steps from your side. TypeScript files are marked with the TypeScript file icon.

TypeScript-aware coding assistance includes completion for keywords, labels, variables, parameters, and functions, error and syntax highlighting, formatting, numerous code inspections and quick-fixes, as well as common and TypeScript-specific refactoring. RubyMine also verifies TypeScript code on the fly and shows errors in a dedicated Problems tool window.

Compilation errors are reported in the TypeScript tool window. Learn more from Compiling TypeScript into JavaScript.

Before you start

Verify TypeScript

RubyMine verifies TypeScript code mainly based on the data from the TypeScript Language Service which also compiles TypeScript into JavaScript.

Descriptions of the errors detected in the current file and quick-fixes for them are available from the editor and from the Current File tab of the Problems tool window.

Errors across the entire project and quick-fixes for them are shown in the Project Errors tab of the Problems tool window. To open the tool window, click the Inspection widget in the upper-right corner of the editor:

Inspection widget

See View problems and apply quick-fixes in the editor and Problems tool window for details.

Verify TypeScript in the current file

  • In the editor, hover the mouse pointer over the highlighted problem. RubyMine shows a tooltip with a description of the problem.

    View description of an error in the editor

    Apply the suggested quick-fix or click More actions and select the relevant one from the list.

    Apply quick-fix in the editor

  • Alternatively open the Current File tab of the Problems tool window Alt+6, where you can view problem descriptions, apply quick-fixes, navigate to the fragments in the source code where errors occurred, as well as fix them in the Editor Preview pane without leaving the tool window. Learn more from Problems tool window.

Verify TypeScript in the entire project

  1. To open the Problems tool window, click the Inspections widget in the upper-right corner of the editor.

    Inspection widget

    Alternatively select View | Tool windows | Problems from the main menu or press Alt+6.

  2. Open the Project Errors tab, which shows the errors across the entire project, with error messages grouped by files in which they were detected.

    Problems tool window, TypeScript. Project Errors tab shows syntax errors across the project

    Here you can view problem descriptions, apply quick-fixes, navigate to the fragments in the source code where errors occurred, as well as fix them in the Editor Preview pane without leaving the tool window. Learn more from Problems tool window.

Configure integration with the TypeScript Language Service

In most cases, everything works out of the box and no manual configuration is required. However, if you want to use a custom typescript package or pass some command-line options to the TypeScript Language Service, you can customize the default settings.

Restart the TypeScript Language Service

Edit TypeScript code

RubyMine brings you smart coding assistance for TypeScript including context-aware code completion, auto-import for symbols, documentation look-up, parameter hints, navigation, TypeScript-aware syntax highlighting and linting, refactoring and more.

Auto import

RubyMine can generate import statements for modules, classes, components, and any other TypeScript symbols that are exported. By default, RubyMine adds import statements when you complete TypeScript symbols.

When you type your code or paste a fragment with a symbol that is not yet imported, RubyMine can also generate an import statement for this symbol. If there is only one source to import the symbol from, RubyMine inserts an import statement silently. Otherwise, use an auto-import tooltip or a dedicated import quick-fix.

Add import statements on code completion

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), go to Editor | General | Auto Import. The Auto Import page opens.

  2. In the TypeScript/JavaScript area, select the Add TypeScript imports automatically and On code completion checkboxes.

tip

To change the background color for auto-import tooltips, press Ctrl+Alt+S and go to Editor | Color Scheme | General | Popups and Hints | Question hints.

Add import statements on typing or pasting code

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), go to Editor | General | Auto Import. The Auto Import page opens.

  2. In the TypeScript/JavaScript area, select the Add TypeScript imports automatically and Unambiguous imports on the fly checkboxes.

Use auto-import tooltips

If an import statement for a TypeScript symbol was not added on completion or editing, RubyMine shows you a popup that suggests importing the symbol.

  • To accept the suggestion, press Alt+Enter:

    ws_import_pop_up.png

  • If there's more than one possible source of import, RubyMine informs you about that:

    ws_import_pop_up_multiple_choices.png

    Pressing Alt+Enter in this case opens a list of suggestions:

    ws_import_multiple_choices_suggestion_list.png

  • To hide auto-import tooltips, open the Settings/Preferences dialog (Ctrl+Alt+S), go to Editor | General | Auto Import, and clear the With auto-import tooltip checkbox.

Use import quick-fixes

If an auto-import tooltip doesn't show up, you can always add an import statement via the dedicated quick-fix.

  • To generate an import, select Add import statement:

    Auto import with quick-fix: no choices

    If there is only one source to import a symbol from, RubyMine generates an import statement:

    Auto import with quick-fix: import statement added

  • If there are several sources to import a symbol from, select the relevant one from the suggestion list:

    Auto import with quick-fix, multiple choices: suggestion list

  • If the TypeScript Language Service is enabled in your project, you can also use its suggestion:

    Auto import with suggestion from the TypeScript Language Service: no choices

    If there are several sources to import a symbol from, select the relevant one from the list that the TypeScript Language Service shows:

    Auto import with suggestion from the TypeScript Language Service: multiple choices

Enable type auto imports

  • Open your tsconfig.json file and set the importsNotUsedAsValues flag in compilerOptions to error:

    "importsNotUsedAsValues": "error",

Learn more from the typeScript official website.

Configure the appearance of import statements

  • In the Settings/Preferences dialog (Ctrl+Alt+S), go to Editor | Code Style | TypeScript, and use the controls in the Imports tab.

Documentation look-up

RubyMine lets you get reference for symbols from your project and from its dependencies, for symbols defined in external libraries, and for standard JavaScript APIs because TypeScript implements all of them.

By default, documentation is shown in the Documentation popup but you can configure it to appear in the Documentation tool window.

Quick Documentation in a popup

https://resources.jetbrains.com/help/img/idea/2022.2/ws_ts_quick_doc_popup_706.png
Gif

Click the Show Options Menu icon in the popup to change the font size, display the quick documentation toolbar, or go to the source code. See Quick Documentation in a popup for details.

Quick Documentation in the tool window

https://resources.jetbrains.com/help/img/idea/2022.2/ws_js_quick_doc_tool_window_706.png
Gif

You can open a piece of documentation for a specific code element in the tool window and keep viewing documentation for other elements in your current file as described in Keep documentation in the tool window.

In the tool window, code documentation is displayed on the unpinned tab (the tab marked with the asterisk symbol (*). You can view this documentation by hovering over a symbol or placing the caret at it. See Quick Documentation tool window: modes for details.

View the MDN documentation for a symbol at caret

  • In the Documentation window Ctrl+Q, click the MDN link.

  • Alternatively, press Shift+F1 or choose View | External Documentation from the main menu.

RubyMine opens the MDN article in the default RubyMine browser.

View inlay hints

Inlay hints appear in the editor and provide you with additional information about your code to make it easier to read.

Enable inlay hints

  1. Open the Settings/Preferences dialog (Ctrl+Alt+S), go to Editor | Inlay Hints, and select the checkbox next to TypeScript.

  2. On the TypeScript page below, specify what hints and in what context you want RubyMine to display.

Parameter hints

Parameter hints show the names of parameters in methods and functions to make your code easier to read. By default, parameter hints are shown only for values that are literals or function expressions but not for named objects.

ws_typescript_parameter_hints.png

Configure parameter hints

  1. Open the Settings/Preferences dialog (Ctrl+Alt+S) and go to Editor | Inlay Hints | TypeScript.

  2. Select Parameter hints from the list, make sure the Show parameter hints checkbox is selected, and then specify the context where you want parameter hints shown.

    The preview below shows how the changes you make in the settings affect the code appearance.

  3. For some methods and functions, RubyMine does not show parameter hints in any context. Click Exclude list... to view these methods and functions, possibly enable parameter hints for them, or add new items to the list.

tip

To hide parameter hints for all types of values, clear the Show parameter name hints checkbox. Learn more from Parameter info.

Return type hints

Return type hints for chained methods are inferred from a JSDoc comment or based on the static analysis of your code. Return type hints are by default shown for chained methods that are split between multiple lines and return at least 2 different types.

Configure method return type hints

  1. Open the Settings/Preferences dialog (Ctrl+Alt+S) and go to Editor | Inlay Hints | TypeScript.

  2. Select Method return types in call chains from the list, make sure the Show hints checkbox is selected, and then specify the minimum number of different types in a call chain for which you want return type hints show.

    The preview below shows how the changes you make in the settings affect the code appearance.

Type hints

Type annotations show a variable type or a function return type next to their definition. Type annotations are inferred from JSDoc comments or static analysis of your code.

Configure type hints

  1. Open the Settings/Preferences dialog (Ctrl+Alt+S) and go to Editor | Inlay Hints | TypeScript.

  2. Select Type annotations from the list, make sure the Show type hints for checkbox is selected, and then specify the context where you want type hints shown.

    The preview below shows how the changes you make in the settings affect the code appearance.

Numeric enum values

By default, RubyMine shows inferred values for numeric enums to make your code easier to read.

Hide numeric enum values

  1. Open the Settings/Preferences dialog (Ctrl+Alt+S) and go to Editor | Inlay Hints | TypeScript.

  2. Select Numeric enum values from the list and clear the Show hints checkbox. The inferred values are hidden, and only the value of the explicitly initialized constant is displayed.

    The preview below shows how the changes you make in the settings affect the code appearance.

JavaScript libraries in TypeScript

When working with JavaScript libraries in TypeScript, you need to install type declarations for them. RubyMine reminds you to install them via npm or yarn and updates your package.json file accordingly.

Install the type declarations

  1. Position the caret at the warning and press Alt+Enter.

  2. Select the suggestion and press Enter.

    ws_ts_add_types.png

Syntax highlighting

You can configure TypeScript-aware syntax highlighting according to your preferences and habits.

Code navigation

You can quickly navigate through your TypeScript project in the RubyMine editor using different actions and popups.

Go to declaration of a symbol

You can navigate from a variable, a field, a method, or any other symbol to its declaration or view the symbol definition in a popup without jumping anywhere from the code you are editing.

Go to usages of a symbol

You can view a list of usages of a symbol and select the one to jump to.

Go to type declaration of a symbol

You can navigate from a variable, a field, a method, or any other symbol to its type declaration. Alternatively, open the type definition in a popup without jumping to the type declaration.

RubyMine also shows the inferred type of an object. You can view the inferred type information in a tooltip or in the documentation popup.

Jump to type declaration

  • To jump from a symbol to the declaration of its type, place the caret at a usage of the symbol and press Ctrl+Shift+B or select Navigate | Type Declaration from the main menu.

    https://resources.jetbrains.com/help/img/idea/2022.2/ws_ts_go_to_type_declaration_light.png
    Gif

  • To view the type definition of a symbol in a popup, place the caret at the symbol for which you want to view the type definition and select View | Quick Type Definition.

    Quick type definition

    For an instance of a class, this will reveal the class itself instead of where this instance is defined.

    tip

    RubyMine has no default keyboard shortcut for this action, but you can manually configure it as described in Adding keyboard shortcuts.

View inferred type information of a symbol

  • Hold Ctrl and hover the mouse pointer over the symbol.

    https://resources.jetbrains.com/help/img/idea/2022.2/ws_typescript_inferred_types_light.png
    Gif

  • Alternatively, hover the mouse pointer over a symbol. RubyMine immediately displays the reference for it in the Documentation popup.

    https://resources.jetbrains.com/help/img/idea/2022.2/ws_typescript_inferred_types_popup_light.png
    Gif

    Learn more from Documentation look-up above.

Note the difference between Go To Declaration and Go To Type Declaration. Suppose you have a file app.ts with the following code: 

import {Dog} from "./dog";

let dog = new Dog();
dog.bark();
If you place the caret at dog in dog.bark(), then Go To Declaration brings you to the declaration of the variable in let dog = new Dog (), while Go To Type Declaration brings you to the declaration of the class Dog.

Navigate between subclasses, superclasses, overrides, and implementations

You can keep track of class implementations and overriding methods either using the gutter icons in the editor or pressing the appropriate shortcuts.

Go to a subclass

  • Press Ctrl+Alt+B or click the Overridden method icon in the gutter and then select the relevant class from the list.

    https://resources.jetbrains.com/help/img/idea/2022.2/ws_ts_go_to_implementation_light.png
    Gif

  • Alternatively, select Navigate | Implementation(s) from the main menu or Go To | Implementation(s) from the context menu and then select the relevant class from the list.

Go to a superclass or overridden method

  • Place the caret at a subclass and press Ctrl+U. RubyMine brings you to the declaration of the superclass and positions the cursor at its name.

  • Click the Overriding method icon in the gutter next to an overriding method. RubyMine brings you to the superclass with the cursor at the overridden method.

    https://resources.jetbrains.com/help/img/idea/2022.2/ws_ts_go_to_overridden_method_light.png
    Gif

    Alternatively, place the caret at the overriding method and press Ctrl+U or select Navigate | Super Method from the main menu or Go To | Super Method from the context menu.

Go to an interface or implemented method

  • Place the caret at an implementation of an interface, press Ctrl+U, and select the interface to go to.

    Go to interface from class

    RubyMine brings you to the declaration of the interface and positions the cursor at its name.

  • Click the Implementing method icon in the gutter next to the implementing method. RubyMine brings you to the corresponding interface with the cursor at the implemented method.

    https://resources.jetbrains.com/help/img/idea/2022.2/ws_ts_go_to_implemented_method_light.png
    Gif

    Alternatively, place the caret at the implementing method and press Ctrl+U or select Navigate | Super Method from the main menu or Go To | Super Method from the context menu.

Refactoring in TypeScript

RubyMine provides both common refactoring procedures, such as rename/move, and so on, and TypeScript-specific refactoring procedures, such as change signature, introduce parameter, introduce variable. See Rename refactorings and Move and copy refactorings for details.

Run and debug your application

With RubyMine, you can run and debug client-side TypeScript code and TypeScript code running in Node.js. Learn more from Running and debugging TypeScript.

See also

Reference

Language and Framework-Specific Guidelines

External Links