WebStorm supports developing and running TypeScript source code. WebStorm 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 icon.
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
- In the Settings/Preferences dialog (Ctrl+Alt+S), click TypeScript under Languages and Frameworks. The TypeScript page opens.
- Specify the Node.js interpreter to use, see Configuring a local Node.js interpreter for details.
- From the TypeScript drop-down list, choose the version of the TypeScript to use (WebStorm displays the currently chosen version).
- By default, the
typescriptpackage from the project's
node_modulesfolder is used.
- Bundled: choose this option to use the
typescriptpackage that comes bundled with WebStorm without attempting to find another one.
- Select: choose this option to use a custom
typescriptpackage instead of the one bundled with WebStorm. Choose the path to the relevant package in the dialog that opens.
- By default, the
- Make sure the TypeScript Language Service checkbox is selected.
- Use the controls below to configure the behaviour of the TypeScript Language Service and enable or disable integration with the Angular language service.
- In the Options field, specify the command line options to be passed to the TypeScript Language Service when the
tsconfig.jsonfile is not found. See the list of acceptable options at TSC arguments. Note that the
--watch(Watch input files) option is irrelevant.
To monitor syntax errors
- Open the TypeScript tool window ( ) 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 on the toolbar. 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.
To monitor compilation errors
- Open the TypeScript tool window ( ) and switch to the Compile errors tab.
The tab opens when you click and choose the compilation scope from the list:
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.
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.
To configure parameter hints
- In the Settings/Preferences dialog (Ctrl+Alt+S) box (Ctrl+Alt+S), choose General under Editor, then choose Appearance. The Appearance page opens.
- Click Configure next to the Show parameter name hint checkbox (the checkbox is selected by default).
- 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:
package.json file accordingly.
To install the type declarations
- Position the cursor at the warning and press Alt+Enter.
- Select the suggestion and press Enter.
To view documentation for a symbol at caret
- Press Ctrl+Q or choose Documentation pop-up window.
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 on the main menu.
WebStorm provides both common refactoring procedures, such as rename/move, etc. TypeScript-specific refactoring procedures, such as change signature, extract parameter, extract variable. See Refactoring Source Code and Refactoring TypeScript for details.
WebStorm 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+/).
importstatements 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.