TypeScript
for Windows and Linux
for OS X
Ctrl+Alt+S
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.
Item | Description |
---|
Node interpreter
|
In this field,
specify the location of the Node.js executable file. In most cases, PhpStorm
detects the Node.js executable and fills in the field automatically.
|
TypeScript version
|
In this area,
specify the version of the compiler to use. PhpStorm displays the default bundled version.
To use a custom version of the compiler:
-
Download the
typescriptServices.js , lib.d.ts , and lib.es6.d.ts files from https://github.com/Microsoft/TypeScript/.
-
Click Edit in the Compiler version area.
-
In the Configure TypeScript Compiler dialog box that opens, choose Custom directory
and specify the folder where the downloaded files are stored.
|
Use TypeScript Service
|
Select this check box
to get native support from the TypeScript Language Service
according to the up-to-date specifications. In this case syntax and error highlighting is performed based on the annotations retrieved from the
TypeScript Language Service while code completion lists contain
both suggestions from the TypeScript Language Service and suggestions calculated by PhpStorm itself.
|
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 on the page become active
and you can configure the behaviour of the compiler.
|
Track changes
|
|
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.
|
Set options manually
|
Choose this option to configure the behaviour of the built-in compiler manually:
-
In Command line options 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.
-
Select the Generate source maps 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.
-
Select the Compile main file only check box
to have PhpStorm 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.
-
Select the Use output path 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 source folder under the content root to which the file belongs,
see Configuring Content Roots and Configuring Folders Within a Content Root.
-
FileDirRelativeToSourcePath :
the path to the file relative to the source folder under the content root to the file belongs.
|
Use tsconfig.json
|
Choose this option to
have the built-in compiler analyze the code according to the settings specified in the tsconfig.json file
.
|
Last modified: 24 November 2016