Activate, deactivate, and configure the behaviour of the built-in TypeScript compiler.
In this field, specify the location of the Node.js executable file. In most cases, WebStorm detects the Node.js executable and fills in the field automatically.
In this area, specify the version of the compiler to use (WebStorm displays the currently chosen version):
In the Configure TypeScript Compiler dialog box that opens, choose one of the following options:
Detect: if you choose this option, WebStorm searches for a typescript package in the current project. If a typescript package is found, WebStorm uses it. Otherwise the default bundled package is used. This option is chosen by default.
Bundled: if you choose this option, WebStorm uses it without attempting to find another typescript package.
Custom directory: choose this option to use a custom version of the compiler. In the text box, specify the location of the typescriptServices.js, lib.d.ts, and lib.es6.d.ts files downloaded from https://github.com/Microsoft/TypeScript/.
Use TypeScript Service
Select this check box to get native support from the TypeScript Language Service according to the up-to-date specifications. 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. To get only suggestions from WebStorm, click Configure and clear the Code completion check box in the Service Options dialog that opens.
WebStorm supports integration with the Angular language service developed by the Angular team to improve code analysis and completion for Angular-TypeScript projects. Note that the Angular language service works only with the projects that use Angular 2.3.1 or higher and TypeScript version compatible with it. The Angular language service is activated by default so WebStorm starts it automatically together with the TypeScript service and shows all the errors and warnings in your TypeScript and HTML files both in the editor and in the TypeScript Compiler Tool Window. However if you still need to activate the service, click Configure and select the Use Angular service check box in the Service Options dialog box that opens.
In the Default options field, specify the command line options to be passed to the compiler 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.
Enable TypeScript Compiler
Select this check box to activate the built-in compiler. When the check box is selected, syntax highlighting and code completion are provided based only on the data from the built-in TypeScript compiler. After you select this check box, the fields below in the area become active and you can configure the behaviour of the compiler. By default, the check box is cleared.
When this check box is selected, the built-in compiler "wakes up" upon any change to a TypeScript file.
When this check box is cleared, the built-in compiler ignores changes to TypeScript files. To re-activate the compiler, open the TypeScript Compiler Tool Window (View | Tool Windows | TypeScript Compiler), and click the Compile All button on the toolbar.
If you have not opened the TypeScript Compiler Tool Window yet and it is not available from the View menu, choose Help | Find Action, then find and launch the TypeScript Compile All action from the list.
From this drop-down list, choose the scope to apply the compiler in. The available options are:
Changed Files: all changed files, that is, all files associated with all existing changelists.
Default: all the files associated with the changelistDefault.
Alternatively, click the Browse button and configure a custom scope in the Scopes dialog box that opens. For more details on scopes, see the pages Scopes and Scopes dialog.
Choose this option to have the built-in compiler analyze the code according to the settings specified in the tsconfig.json file. When you open a project, WebStorm starts searching for a tsconfig.json file in it. If a tsconfig.json file is found, the compiler uses the options specified in it. Otherwise an error is reported.
Set options manually
Choose this option to configure the behaviour of the built-in compiler manually:
Select the Compile main file only check box to have WebStorm compile only a specific file and the files that are referenced from it and ignore all the other files in the project. This may be helpful if you have a dedicated main.ts file which only references other files.
FileDir: the path to the folder where the file is stored.
FileRelativeDir: the path to the file directory relative to the project root.
FileDirRelativeToProjectRoot: the path to the file directory relative to the project root.
ModuleFileDir: the path to the project root folder.
SourcePath: the path to the project root folder.
FileDirRelativeToSourcePath: the path to the file relative to the project root.