GoLand 2020.1 Help

TypeScript

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

Before you start

Verifying TypeScript

GoLand 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, GoLand 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.

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. This can be a local Node.js interpreter or a Node.js on Windows Subsystem for Linux.

  3. From the TypeScript list, choose the version of the TypeScript to use (GoLand 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 comes bundled with GoLand without attempting to find another one.

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

  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.

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.

    ws_ts_toolwindow_syntax_errors.png

    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.

    ws_ts_toolwindow_syntax_errors_jump_to_source.png

Monitor compilation errors

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

Yarn2 in TypeScript projects

In GoLand, you can also manage your project dependencies using Yarn2 with the default Plug’n’Play installation strategy.

If you want to manage TypeScript packages with Yarn2, it is recommended that you install it locally, in each TypeScript project, while you still need a globally installed Yarn1.

With Yarn2, your project dependencies are no longer stored in the node_modules folder. Instead, GoLand organizes them into a library called Dependencies from package.json. To disable the library or configure its scope, open the Settings/Preferences dialog Ctrl+Alt+S and go to Languages and Frameworks | JavaScript | Libraries.

  1. Install Yarn1 globally as described on the Yarn1 official website.

  2. Open the project where you want to use Yarn2.

  3. In the embedded Terminal (Alt+F12), type:

    • yarn set version berry for Yarn version 1.22 and later

    • yarn policies set-version berry for earlier versions

    Learn more from the Yarn official website.

  4. Open the Settings/Preferences dialog Ctrl+Alt+S, go to Languages and Frameworks | Node.js and NPM, and specify the path to your project Yarn2 in the Package manager field.

  5. After you run yarn install, open the Settings/Preferences dialog Ctrl+Alt+S, go to Languages and Frameworks | TypeScript and make sure that yarn:package.json:typescript is specified in the TypeScript field.

Viewing 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, GoLand 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.

Viewing inferred type information

To see the inferred type of an object, hold Ctrl and hover the mouse pointer over it.

ws_typescript_inferred_types.png

Using JavaScript libraries in TypeScript

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

Documentation look-up

GoLand 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, GoLand 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, GoLand 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.

GoLand opens the MDN article in the default GoLand browser.

Refactoring code

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

Auto import in TypeScript

GoLand can generate import statements for modules, classes, components, and any other TypeScript symbols that are exported. By default, GoLand 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, GoLand can also generate an import statement for this symbol. If there is only one source to import the symbol from, GoLand 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.

Using import popups

If for some reason an import statement for a TypeScript symbol was not added on completion or editing, GoLand 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, GoLand 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

Hide import popups

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

  2. Clear With import popup checkbox.

Using import quick-fixes

You can always add an import statement via the dedicated quick-fix:

Auto import with quick-fix: no choices

When you choose Add import statement GoLand adds an import:

Auto import with quick-fix: import statement added

If there are several sources to import a symbol from, GoLand shows you a 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, the TypeScript Language Service shows several suggestions:

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

Configuring 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 Configuring Colors and Fonts.

Last modified: 17 March 2020