CLion 2020.2 Help

TypeScript

CLion supports developing, running, and debugging TypeScript source code. CLion 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. CLion also verifies TypeScript code on the fly and shows syntax and potential compilation errors in a dedicated TypeScript tool window.

Before you start

  • Make sure the JavaScript and TypeScript bundled plugin is enabled on the Settings/Preferences | Plugins page, see Managing plugins for details.

Verify TypeScript

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

All the detected syntax and compilation errors are reported in the Errors and Compile errors tabs of the TypeScript Tool Window. For each error, CLion provides a brief description and information about the number of the line where it occurred.

The Console tab shows the log of the TypeScript Language Service since the tool window was opened.

In most cases, everything works out of the box. 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 as described in Configure integration with the TypeScript Language Service below.

Monitor syntax errors

  • Open the TypeScript tool window (View | Tool Windows | TypeScript) and switch to the Errors tab.

    The tab lists the discrepancies in the code detected by the TypeScript Language Service. The list is updated dynamically as you change your code.

    By default, the list contains only the errors from the file in the active editor tab and the full path to this file is displayed at the top. To show the errors across the entire project, press the Show project errors toggle button Show project errors toggle button on the toolbar.

    Error messages are grouped by files in which they were detected.

    TypeScript tool window, Errors tabs shows syntax errors

    To navigate to the code in question, double-click the corresponding error message or select it and choose Jump to Source from the context menu.

Monitor compilation errors

  • In the TypeScript tool window (View | Tool Windows | TypeScript), switch to the Compile errors tab.

    When you have just opened the TypeScript tool window, you cannot see the Compile errors tab in it. The tab shows up only after first manual compilation, when you click Compile all button and select the compilation scope.

    TypeScript: monitor compilation errors

    The tab lists all the compilation errors detected in the chosen scope. This list is not affected by changes you make to your code and is updated only when you invoke compilation manually again.

    Error messages are grouped by files in which they were detected. To navigate to the code in question, double-click the corresponding error message or select it and choose Jump to Source from the context menu.

Configure integration with the TypeScript Language Service

  1. In the Settings/Preferences dialog Ctrl+Alt+S, go to Languages and Frameworks | TypeScript. The TypeScript page opens.

  2. Specify the Node.js interpreter to use. If you choose the Project alias, CLion will automatically use the project default interpreter from the Node interpreter field on the Node.js and NPM page .

    In most cases, CLion detects the project default interpreter and fills in the field itself. You can also choose another configured local interpreter or click the Browse button and configure a new one.

  3. In the TypeScript field, specify the version of the TypeScript to use (CLion displays the currently chosen version).

    • By default, the typescript package from the project's node_modules folder is used.

    • Bundled: choose this option to use the typescript package that is shipped with CLion without attempting to find another one.

    • Select: choose this option to use a custom typescript package instead of the one bundled with CLion. In the dialog that opens, choose the path to the relevant package.

    • If your project package manager is Yarn 2, you have to use the typescript package installed via Yarn 2. In this case, yarn:package.json:typescript is by default selected.

      Learn more about package managers from npm and Yarn.

  4. Make sure the TypeScript Language Service checkbox is selected.

  5. Use the controls below to configure the behaviour of the TypeScript Language Service.

  6. In the Options field, specify the command-line options to be passed to the TypeScript Language Service when the tsconfig.json file is not found. See the list of acceptable options at TSC arguments. Note that the -w or --watch (Watch input files) option is irrelevant.

Edit TypeScript code

CLion 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

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

See Create imports to learn how to optimize import statements and configure their style.

When you type your code or paste a fragment with a symbol that is not yet imported, CLion can also generate an import statement for this symbol. If there is only one source to import the symbol from, CLion inserts an import statement silently. Otherwise, use an import popup 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.

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 import popups

If for some reason an import statement for a TypeScript symbol was not added on completion or editing, CLion 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, CLion 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 import popups, open the Settings/Preferences dialog Ctrl+Alt+S , go to Editor | General | Auto Import, and clear the With import popup checkbox.

Use import quick-fixes

If an import popup 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, CLion 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

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

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

The documentation is shown in a Documentation popup that helps navigate to the related symbols via hyperlinks, and provides a toolbar for moving back and forth through the already navigated pages.

View documentation for a symbol

  • Position the caret at the symbol and press Ctrl+Q or select View | Quick Documentation Lookup from the main menu.

  • When you hover the mouse pointer over a symbol, CLion immediately displays the reference for it in the Documentation popup.

    You can turn off this behavior or configure the popup to appear faster or slower, see Configuring the behavior of Documentation popup below.

For standard JavaScript methods available in TypeScript, CLion also shows a link to the corresponding MDN article.

ws_ts_doc_from_mdn.png

Configure the behavior of Documentation popup

  • To turn off showing documentation automatically, open the Settings/Preferences dialog Ctrl+Alt+S, go to Editor | Code Editing, and clear the Show quick documentation on mouse move checkbox.

  • To have the Documentation popup shown faster or slower, open the Settings/Preferences dialog Ctrl+Alt+S, go to Editor | General | Code Completion, then select the Show the documentation popup checkbox and specify the delay time.

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.

CLion opens the MDN article in the default CLion browser.

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.

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

JavaScript libraries in TypeScript

When working with JavaScript libraries in TypeScript, you need to install type declarations for them. CLion 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.

  1. In the Settings/Preferences dialog Ctrl+Alt+S, go to Editor | Color Scheme | TypeScript.

  2. Select the color scheme, accept the highlighting settings inherited from defaults or customize them as described in Colors and fonts.

Code navigation

You can quickly navigate through your TypeScript project in the CLion 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.

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

    Go to declaration

    Alternatively, use Ctrl+Click: keeping Ctrl pressed, hover your mouse pointer over the symbol. When the symbol turns into a hyperlink, click the hyperlink without releasing Ctrl.

    Go to Declaration with Ctrl+click
  • To view the definition of a symbol in a popup, place the caret at its usage and press Ctrl+Shift+I or select View | Quick Definition from the main menu.

    View the definition of a symbol on a popup

Go to usages of a symbol

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

  1. To get a list of usages of a symbol, place the caret at the declaration of the symbol and do one of the following:

    • Press Ctrl+B or select Navigate | Declaration or Usages from the main menu.

    • Press Ctrl+Alt+F7 or select Edit | Find Usages | Shows Usages from the main menu.

  2. From the list, select the usage of the symbol where you want to jump.

    Go to usages of a symbol

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.

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

    Go to type declaration
  • 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.

View inferred type information of a symbol

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

    Inferred type of a symbol is shown in a tooltip
  • Alternatively, hover the mouse pointer over a symbol. CLion immediately displays the reference for it in the Documentation popup.

    Inferred type of an object is shown in the documentation popup

    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.

    Go to descendent class
  • 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. CLion 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. CLion brings you to the superclass with the cursor at the overridden method.

    Go to overridden method

    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

    CLion 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. CLion brings you to the corresponding interface with the cursor at the implemented method.

    Go to implemented method

    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

CLion 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 and Move and Copy for details.

Last modified: 27 November 2020