PhpStorm 2018.1 Help

TypeScript

PhpStorm supports developing, running, and debugging TypeScript source code. PhpStorm 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 ac iconFileType TypeScript icon.

TypeScript-aware coding assistance includes completion for 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. PhpStorm also verifies and compiles TypeScript into JavaScript on the fly.

Verifying TypeScript and compiling it into JavaScript

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

To configure integration with the TypeScript Language Service

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), click TypeScript under Languages and Frameworks. The TypeScript page opens.
  2. Specify the Node.js interpreter to use, see Configuring a local Node.js interpreter for details.
  3. From the TypeScript drop-down list, choose the version of the TypeScript to use (PhpStorm 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 PhpStorm without attempting to find another one.
    • Select: choose this option to use a custom typescript package instead of the one bundled with PhpStorm. 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 and enable or disable integration with the Angular 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.

To 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 icon ws ts tool window show project errors 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 on the context menu.

    ws_ts_toolwindow_syntax_errors_jump_to_source.png

To monitor compilation errors

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

    The tab opens when you click icon ts compile all and choose the compilation scope from the list:

    ws_ts_toolwindow_compilation_errors.png

    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 on the context menu.

    ws_ts_toolwindow_syntax_errors_jump_to_source.png

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

To configure parameter hints

  1. In the Settings/Preferences dialog (Ctrl+Alt+S) box (Ctrl+Alt+S), choose General under Editor, then choose Appearance. The Appearance page opens.
  2. Click Configure next to the Show parameter name hint checkbox (the checkbox is selected by default).
  3. In the Configure Parameter Name Hints dialog that opens, select the Show name for all arguments checkbox in the Options area.

Viewing inferred type information

To see the inferred type of an object, hold on macOS or Ctrl on Windows and Linux 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. PhpStorm reminds you to install them via npm and updates your package.json file accordingly.

To install the type declarations

  1. Position the cursor at the warning and press Alt+Enter.
  2. Select the suggestion and press Enter.
    ws_ts_add_types.png

Documentation look-up

PhpStorm 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 pop-up window that helps navigate to the related symbols via hyperlinks, and provides a toolbar for moving back and forth through the already navigated pages.

To view documentation for a symbol at caret

  • Press Ctrl+Q or choose View | Quick Documentation Lookup on the main menu. The reference for the symbol is shown in the Documentation pop-up window.

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

    ws_ts_doc_from_mdn.png

To view the MDN documentation for a symbol at caret, do one of the following:

  • In the Documentation window (Ctrl+Q), click the MDN link.
  • Press Shift+F1 or choose View | External Documentation on the main menu.

Refactoring code

PhpStorm provides both common refactoring procedures, such as rename/move, etc. TypeScript-specific refactoring procedures, such as change signature, extract parameter, extract variable. See Rename Refactorings, Move and Copy refactorings, and Refactoring TypeScript for details.

Generating code

PhpStorm supports the following TypeScript-aware code generation functionality:

  • Generating code stubs based on file templates during file creation.
  • Ability to create line and block comments (Ctrl+//Ctrl+Shift+/).
  • Configuring automatic insertion or skipping the public access modifier in generated code.
  • Generating import statements for modules, classes, and any other symbols that can be exported and called as a type, see Adding import statements automatically.

Adding import statements automatically

When you are using a TypeScript symbol that has not been imported yet PhpStorm shows you a popup that suggests to import the symbol. To accept the suggestion Alt+Enter:

ws_import_pop_up.png
If there's more than one possible source of import, PhpStorm 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

PhpStorm can generate missing import statements when you complete TypeScript symbols.

Generate import statements on code completion

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), click General under editor, and then click Auto Import. The Auto Import page opens.
  2. Use the checkboxes in the TypeScript/JavaScript area to enable or disable import generation on code completion.

By default, PhpStorm shows an import popup when you place the cursor at an unresolved TypeScript symbol that can be imported. This happens if code completion for some reason didn't trigger import generation, for example, if you pasted the code block with this symbol, or just typed it entirely, or if import generation on completion is turned off. You can disable import popups and add import statements with a quick-fix (press Alt+Enter and choose Insert import... from the list).

Hide import popup

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), click General under editor, and then click Auto Import. The Auto Import page opens.
  2. Clear With import popup checkbox.

Finally, you can configure PhpStorm to automatically add TypeScript import statements if there are no options to choose from.

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), click General under editor, and then click Auto Import. The Auto Import page opens.
  2. Select the Unambiguous imports on the fly checkbox.

If you are using dynamic imports with import(), PhpStorm completes the properties of the imported module and lets you jump back to their definitions with Ctrl+B.

Use full names for ES6 modules

When you use ES6 modules in a browser that requires full file names, for example, in Chrome, it is important that the names of ES6 modules in import statements have the js extensions.

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), click Code Style under Editor, and then click TypeScript. The Code Style: TypeScript page opens.
  2. On the Imports tab, select the Use .js file extension in module name checkbox.
Last modified: 20 April 2018

See Also

Reference:

Language and Framework-Specific Guidelines: