On this page:
- Configuring and activating the built-in TypeScript compiler
- Compiling TypeScript using the built-in compiler
- Running the built-in TypeScript compiler as a before-launch task
Configuring and activating the built-in TypeScript compiler
- Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing for Windows and Linux or for macOS, and click Typescript under Languages & Frameworks.
- On the TypeScript page that opens, select the Enable TypeScript Compiler check box to activate the compiler. When the checkbox is selected, syntax highlighting and code completion are provided based only on the data from the built-in TypeScript compiler. After you select this checkbox, the fields below in the area become active and you can configure the behaviour of the compiler. By default, the checkbox is cleared.
- To have the compiler "wake up" upon any change to a TypeScript file, select the Track changes checkbox.
When this checkbox is cleared, the built-in compiler ignores changes to TypeScript files. To re-activate the compiler, open the TypeScript Compiler Tool Window (), and click the Compile All button on the toolbar.
- In the other fields of the TypeScript Compiler page, specify the following:
- In the Node interpreter 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.
- In the TypeScript version area, specify the version of the compiler to use (PhpStorm displays the currently chosen version):
- Click Edit.
- In the Configure TypeScript Compiler dialog box that opens, choose one of the following options:
- Detect: if you choose this option, PhpStorm searches for a
typescriptpackage in the current project. If a
typescriptpackage is found, PhpStorm uses it. Otherwise the default bundled package is used. This option is chosen by default.
- Bundled: if you choose this option, PhpStorm uses it without attempting to find another
- Custom directory: choose this option to use a custom version of the compiler. In the text box, specify the location of the
lib.es6.d.tsfiles downloaded from https://github.com/Microsoft/TypeScript/.
- Detect: if you choose this option, PhpStorm searches for a
- From the Scope 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
- Choose the Set options manually to configure compilation manually:
- 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.tsfile which only references other files.
$<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.
- Choose the Use tsconfig.json option, have the built-in compiler analyze the code according to the settings specified in the
tsconfig.jsonfile. When you open a project, PhpStorm starts searching for a
tsconfig.jsonfile in it. If a
tsconfig.jsonfile is found, the compiler uses the options specified in it. Otherwise an error is reported.
Compiling TypeScript using the built-in compiler
- To activate a previously configured built-in compiler, select the Enable TypeScript Compiler check box on the TypeScript Compiler page.
Alternatively, use the buttons on the pane which PhpStorm displays when you open a TypeScript file.
- To enable an already configured compiler, click Enable.
- To configure a compiler, click Configure and specify the settings on the TypeScript Compiler page that opens.
- To leave the compiler disabled and suppress showing the pane in the future, click Dismiss, whereupon the compiler can be later activated only on the TypeScript Compiler page.
- View the errors detected during compilation, compile separate files and the entire project in the TypeScript Compiler Tool Window. If you have configured the compiler to track changes, which is the default behaviour, the tool window opens automatically as soon as you start editing a TypeScript file.
- Click the Compile Current File toolbar button to run the compiler against the entire file opened in the active editor tab. This approach is helpful if you do not want the compiler to wake up on any change as you edit your code and for this purpose the Track Changes checkbox on the TypeScript page of the Settings dialog box is cleared.
- Click the Compile All toolbar button to run the compiler against all the TypeScript files in the current project. If you click this button from the Current Errors pane, after compilation PhpStorm switches to the Project Errors pane.
- To clear the contents of the current pane, click the Clear All toolbar button .
- To navigate to the fragment of code where an error occurred during compilation, select the error message in question and choose Jump to Source on the context menu of the selection.
js, the source map file has the name of the source TypeScript file and the
js.map extension. In the Project Tree, the files are shown under the source TypeScript file which is now displayed as a node. This presentation is preserved even if you turn off the compiler during a PhpStorm session.
Running the built-in TypeScript compiler as a before-launch task
- Open the Run/Debug Configurations dialog by choosing on the main menu, and select the required configuration from the list or create it anew by clicking and choosing the relevant run configuration type.
- In the dialog box that opens, click in the Before launch area and choose Compile TypeScript from the drop-down list.
- In the TypeScript Compile Settings dialog that opens, select or clear the Check errors checkbox to configure the behaviour of the compiler in case any errors are detected: