TypeScript
CLion supports developing, running, and debugging TypeScript source code. CLion 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.
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. CLion also verifies and compiles TypeScript into JavaScript on the fly.
Verifying TypeScript and compiling it into JavaScript
CLion 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, CLion 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
-
In the Settings/Preferences dialog (Ctrl+Alt+S), go to . The TypeScript page opens.
-
Specify the Node.js interpreter to use. If you choose the Project alias, CLion will automatically use the project default interpreter from the Node interpreter field on the Node.js and NPM page.
In most cases, CLion detects the project default interpreter and fills in the field itself. You can also choose another configured local interpreter or click
and configure a new one. -
From the TypeScript list, choose the version of the TypeScript to use (CLion 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 CLion without attempting to find another one.
Select: choose this option to use a custom typescript package instead of the one bundled with CLion. Choose the path to the relevant package in the dialog that opens.
-
Make sure the TypeScript Language Service checkbox is selected.
-
Use the controls below to configure the behaviour of the TypeScript Language Service.
-
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
-wor--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), go to . 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. 
Using JavaScript libraries in TypeScript
When working with JavaScript libraries in TypeScript, you need to install type declarations for them. CLion reminds you to install them via npm and updates your 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.
Documentation look-up
CLion 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.
To view documentation for a symbol at caret
-
Press Ctrl+Q or choose on the main menu. The reference for the symbol is shown in the Documentation popup.
For standard JavaScript methods available in TypeScript, CLion also shows a link to the corresponding MDN article.
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.
Refactoring code
CLion provides both common refactoring procedures, such as rename/move, and so on, and TypeScript-specific refactoring procedures, such as change signature, extract parameter, extract variable. See Rename and Move and Copy for details.
Auto import in TypeScript
CLion can generate import statements for modules, classes, components, and any other TypeScript symbols that are exported. By default, CLion 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, CLion can also generate an import statement for this symbol. If there is only one source to import the symbol from, CLion inserts an import statement silently. Otherwise, use an import popup or a dedicated import quick-fix.
To add import statements on code completion
-
In the Settings/Preferences dialog (Ctrl+Alt+S), go to . The Auto Import page opens.
-
In the TypeScript/JavaScript area, select the Add TypeScript imports automatically and On code completion checkboxes.
To add import statements on typing or pasting code
-
In the Settings/Preferences dialog (Ctrl+Alt+S), go to . The Auto Import page opens.
-
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, CLion 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, CLion informs you about that:
Pressing Alt+Enter in this case opens a list of suggestions:
To hide import popups
-
In the Settings/Preferences dialog (Ctrl+Alt+S), go to . The Auto Import page opens.
-
Clear With import popup checkbox.
Using import quick-fixes
You can always add an import statement via the dedicated quick-fix:
When you choose Add import statement CLion adds an import:
If there are several sources to import a symbol from, CLion shows you a suggestion list:
If the TypeScript Language Service is enabled in your project, you can also use its suggestion:
If there are several sources to import a symbol from, the TypeScript Language Service shows several suggestions:
Configuring syntax highlighting
You can configure TypeScript-aware syntax highlighting according to your preferences and habits.
-
In the Settings/Preferences dialog (Ctrl+Alt+S), go to .
Select the color scheme, accept the highlighting settings inherited from defaults or customize them as described in Configuring Colors and Fonts.