TypeScript Support
In this section:
- TypeScript Support
- Transpiling TypeScript to JavaScript
- Running TypeScript
- Debugging TypeScript
- Using TSLint Code Quality Tool
Introduction
PhpStorm supports developing and running TypeScript
source code. PhpStorm recognizes *.ts
files, and allows you to edit them providing full
range of coding assistance without any additional steps from your side. TypeScript files are marked with
the icon.
To run, debug, and test your code you will need it translated into JavaScript which requires a transpiler.
Preparing for TypeScript development
- Make sure the JavaScript Support plugin is enabled. The plugin is bundled with PhpStorm and activated by default. If the plugin is not activated, enable it on the Plugins page of the Settings / Preferences Dialog as described in Enabling and Disabling Plugins.
- Make sure the Node.js plugin is installed and enabled. The plugin is not bundled with PhpStorm, but it can be installed from the JetBrains plugin repository as described in Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins.
Coding assistance
TypeScript support includes:
-
Coding assistance:
- Code completion for keywords, labels, variables, parameters, and functions.
- Error and syntax highlighting.
- Code formatting and folding.
- Numerous code inspections and quick-fixes.
This assistance can be provided either by PhpStorm itself, or based on the data from the built-in TypeScript compiler, or through integration with the TypeScript Language Service. Provision of coding assistance is configured on the TypeScript page of the Settings / Preferences Dialog:
-
Select the Use TypeScript Service 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.
To get only suggestions from PhpStorm, click Configure and clear the Code completion check box
in the Service Options dialog box that opens.
By default, the Use TypeScript Service check box is selected.
- Select the Enable TypeScript Compiler check box to active 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.
- Refactoring:
- Common refactoring procedures, such as extract method , inline, rename/move, etc.
- TypeScript-specific refactoring procedures, such as change signature, extract parameter, extract variable.
See JavaScript-Specific Refactorings for details.
- Code generation
- Generating code stubs based on file templates during file creation.
- Ability to create line and block comments (Ctrl+Slash/Ctrl+Shift+Slash).
- Downloading stubs for TypeScript definition files and configuring them as a PhpStorm JavaScript library (see Configuring JavaScript Libraries).
- Generating
import
statements for modules, classes, and any other symbol that can be exported and called as a type, see Creating Imports, section Importing TypeScript Symbols.You can also configure the type of quotes to be used in
import
statements by choosing Double quotes or Single quotes from the String literal type drop-down list on the Code Style. TypeScript page of the Settings dialog box. - Configuring automatic insertion or skipping the public access modifier in generated code.
- Navigation and search through the source code:
- Navigating with Structure View.
- (Ctrl+B).
- (Ctrl+Alt+B) from overridden method / subclassed class.
- Transpiling to JavaScript for further running, debugging, and testing, see Running TypeScript and Debugging TypeScript.