PhpStorm 2017.3 Help

TypeScript

PhpStorm supports developing and running 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

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 show parameter hints for all arguments

  1. In the Settings/Preferences dialog 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.

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

TypeScript code verification and compilation 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. Select the Use TypeScript Service checkbox.
  3. Use the controls below to configure the behaviour of the TypeScript compiler and enable or disable integration with the Angular language service.
  4. 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. The tab shows error messages grouped by files in which they were detected.
  • To navigate to the code in question, select the corresponding error message and choose Jump to Source on the context menu.

To monitor compilation errors
Open the TypeScript tool window (View | Tool Windows | TypeScript) and switch to the Compile errors tab. The tab lists the errors that occurred during compilation.

  • By default, the list is updated dynamically as you edit your code. To change this setting, clear the Recompile on changes checkbox on the TypeScript page.
  • By default, the list contains only the errors from the file in the active editor tab. To view the compilation errors across the entire compilation scope, click icon_ts_compile_all.png on the toolbar and choose Compile All from the list. The error messages are shown grouped by files in which they were detected.
  • To navigate to the code in question, select the corresponding error message and choose Jump to Source on the context menu.

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

Common and TypeScript-specific refactoring

  • Common refactoring procedures, such as rename/move, etc. See Rename Refactorings and Move Refactorings for details.
  • TypeScript-specific refactoring procedures, such as change signature, extract parameter, extract variable. See for details.

Code generation

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

Learn more from Generating Code.

Last modified: 6 December 2017

See Also

Reference:

Language and Framework-Specific Guidelines: