WebStorm 2016.1 Help

TypeScript

File | Settings | Languages & Frameworks | TypeScript for Windows and Linux
WebStorm | Preferences | Languages & Frameworks | TYpeScript for OS X
Ctrl+Alt+S
settings


In this dialog, activate, deactivate, and configure the behaviour of the built-in TypeScript compiler that transpiles TypeScript code into JavaScript so the code can be executed in a browser and generates sources maps that ensure correspondence between the lines in the generated JavaScript code and the lines in the original TypeScript code.

ItemDescription
Resolve objects using tsconfig.json
  • Select this check box to have your TypeScript code analyzed without actually running the built-in compiler but through checking the scopes set in the tsconfig.json file .
  • If the check box is cleared and the Enable TypeScript Compiler check box is cleared as well, no analysys of the TYpeScript code is performed at all.
  • Selecting the check box when the Enable TypeScript Compiler check box is selected as well is excessive.
Enable TypeScript Compiler Select this check box to activate the built-in compiler. When the check box is selected, the fields below on the page become active and you can configure the behaviour of the compiler.
Node interpreter 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.
Compiler version In this area, specify the version of the compiler to use. WebStorm displays the default bundled version.

To use a custom version of the compiler:

  1. Download the typescriptServices.js, lib.d.ts, and lib.es6.d.ts files from https://github.com/Microsoft/TypeScript/.
  2. Click Edit in the Compiler version area.
  3. In the Configure TypeScript Compiler dialog box that opens, choose Custom directory and specify the folder where the downloaded files are stored.

Generate source maps Select this check box to generate source maps that set correspondence between lines in your TypeScript code and in the generated JavaScript code, otherwise your breakpoints will not be recognised and processed correctly.
Track changes
  • 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 icon_ts_compile_all 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.

Scope From this drop-down list, choose the scope to apply the compiler in. The available options are:
  • Project Files: all the files within the project content roots (see Content Root and Configuring Content Roots).
  • Project Production Files: all the files within the project content roots excluding test sources.
  • Project Test Files: all the files within the project test source roots.
  • Open Files: all the files that are currently opened in the editor.

VCS Scopes: these scopes are only available if your project is under version control.

  • Changed Files: all changed files, that is, all files associated with all existing changelists.
  • Default: all the files associated with the changelist Default.
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.
Command line options In this field, specify the command line options to be passed to the compiler. See the list of acceptable options at TSC arguments. Note that, the -w or --watch option (Watch input files) is irrelevant.
Compile main file only Select this 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.
Use output path Select this check box to have the built-in compiler store the generated JavaScript files and source map in a custom folder. Specify the path to this folder explicitly or use one of the listed available macros in the format: $<macros_name>$. The available macros are:
  • 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.

See Also

Last modified: 11 July 2016