TypeScript

1. In the Settings dialog (Ctrl+Alt+S) , go to Languages & Frameworks | TypeScript.

   Alternatively, click the Language Services widget on the Status bar and then click .

   

   The TypeScript page opens.

2. Specify the Node.js interpreter to use.

   If you choose the Project alias, WebStorm will automatically use the project default interpreter from the Node interpreter field on the Node.js page . In most cases, WebStorm detects the project default interpreter and fills in the field itself.

   You can also choose another configured local or remote interpreter or click and configure a new one.

   For more information, refer to Configuring remote Node.js interpreters, Configuring a local Node.js interpreter, and Using Node.js on Windows Subsystem for Linux.

3. In the TypeScript field, specify the version of the TypeScript to use (WebStorm 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 WebStorm without attempting to find another one.

   • Select: choose this option to use a custom typescript package instead of the one bundled with WebStorm. 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. As a result:

   • Syntax and error highlighting is based on the annotations from the TypeScript Language Service.

   • Completion lists contain both suggestions from the TypeScript Language Service and suggestions calculated by WebStorm.

   • TypeScript code is compiled into JavaScript.

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

   • Show project errors - By default, this checkbox is selected and the TypeScript Language Service checks the code across the entire project. The detected errors are listed in the Project Errors tab of the Problems tool window grouped by files where they occurred.

     To avoid performance issues, clear the Show project errors checkbox so the TypeScript Language Service checks files only when you open them. The Project Errors tab will then list the errors that are detected only in the files that you have already opened.

   • Show suggestions - By default, this checkbox is selected and WebStorm shows potential problems that the TypeScript Language Service detects in your code in addition to actual errors.

     

     

   • Use types from server - Select this checkbox to evaluate types of symbols based on the data from the TypeScript Compiler.

     By default, the checkbox is cleared, so type evaluation, resolution, code inspections and refactorings are based on the type information from the WebStorm internal TypeScript engine.

     This default behavior may result in performance issues and in bugs in type resolution because the type evaluation algorithm that the WebStorm internal TypeScript engine uses differs from the algorithm of the TypeScript Compiler. Selecting the checkbox may help avoid these problems.

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.

• Click the Language Services widget on the Status bar and then click .

  

1. In the Settings dialog (Ctrl+Alt+S) , go to Languages & Frameworks | TypeScript.

2. In the TypeScript field, specify a typescript package different from Bundled. This may be the typescript package from your project node_modules folder or from any other location.

3. In the Options field, type --locale <abbreviation of the language to use>. Currently, Korean (ko) and Japanese (ja) are supported.

Add import statements on code completion

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

2. In the TypeScript/JavaScript area, make sure the Add TypeScript imports automatically and On code completion checkboxes are selected.

Add import statements on typing or pasting code

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

2. In the TypeScript/JavaScript area, make sure the Add TypeScript imports automatically and Unambiguous imports on the fly checkboxes are selected.

Use auto-import tooltips

• If an import statement for a TypeScript symbol was not added on completion or editing, WebStorm shows you a popup that suggests importing the symbol. To accept the suggestion, press Alt+Enter:

  If there's more than one possible source of import, WebStorm informs you about that:

  

  Pressing Alt+Enter in this case opens a list of suggestions:

  

• To hide auto-import tooltips, open the Settings dialog (Ctrl+Alt+S) , go to Editor | General | Auto Import, and clear the With auto-import tooltip checkbox.

Use import quick-fixes

If an auto-import tooltip doesn't show up, you can always press Alt+Enter and add an import statement via a quick-fix.

• To generate an import, select Insert import from:

  

  If there is only one source to import a symbol from, WebStorm generates an import statement:

  

• If there are several sources to import a symbol from, select the relevant one from the suggestion list:

  

• If the TypeScript Language Service is enabled in your project, you can also use its suggestion:

  

Configure the appearance of import statements

• In the Settings dialog (Ctrl+Alt+S) , go to Editor | Code Style | TypeScript, and use the controls in the Imports tab. For more information, refer to Imports tab.

View Quick Documentation

• Hover over the necessary symbol in the editor.

  Alternatively, place the caret at the symbol and press Ctrl+Q or select View | Quick Documentation from the main menu.

• To open Quick Documentation in the Documentation tool window by default, click in the popup or on the toolbar of the tool window and clear the Show Documentation Popup First option.

• Click in the popup to change the font size, display the quick documentation toolbar, or go to the source code.

  For more information, refer to Configure the Quick Documentation popup.

Install the type declarations

1. Place the caret at the warning and press Alt+Enter.

   

2. Select the suggestion and press Enter.

   

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

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

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

  

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

  

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

  

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. In the popup, use the icons on the toolbar to configure the appearance of the list and filter out irrelevant usages, for example, in import statements.

   

3. From the list, select the usage of the symbol where you want to jump and press Enter.

   

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

  

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

  

  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 over the symbol.

  

• Alternatively, hover over a symbol. WebStorm immediately displays the reference for it in the Documentation popup.

  

  Learn more from Documentation look-up above.

Go to a subclass

• Press Ctrl+Alt+B or click in the gutter and then select the relevant class from the list.

  

• 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. WebStorm brings you to the declaration of the superclass and places the caret at its name.

• Click in the gutter next to an overriding method. WebStorm brings you to the superclass with the caret at the 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 and press Ctrl+U.

  

  WebStorm brings you to the declaration of the interface and places the caret at its name.

• Click in the gutter next to the implementing method. WebStorm brings you to the corresponding interface with the caret at the 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.