TypeScript is getting more and more popular recently, especially for Angular 2 projects.
To help you quickly get started with a new TypeScript project, WebStorm offers a built-in TypeScript compiler that you can use instead of configuring some other build tool. Let’s have a closer look at it!
Once you open a TypeScript file, WebStorm will suggest enabling its built-in TypeScript compiler to compile your code to JavaScript.
If you have a tsconfig.json file in your project, WebStorm will retrieve all the compiler options and project configuration from it and use them automatically.
You can configure the compiler behavior in Preferences | Languages & Frameworks | TypeScript.
For example, you can select Set options manually and specify the required compiling options as a command line arguments. These would then be used instead of the options in a tsconfig.json file (though we recommend using tsconfig.json).
You can configure WebStorm to use a different version of the TypeScript compiler. To do so, click Edit… next to the compiler version in Preferences and specify a path to the TypeScript compiling service (lib folder in the TypeScript package with typescriptServices.js and lib.d.ts files).
Auto compilation on changes
There are two modes in which you can use a built-in TS compiler: it can either compile your code automatically as you write the code (check Track changes option), or you can trigger it manually with Compile All or Compile Current File actions. These actions are available via Find action popup (Cmd-Shift-A) or on the TypeScript Compiler tools window. Or you can assign them to the shortcut of your choice in Preferences | Keymap.
Any errors occurred during compilation would be shown in this tool window and also right in the editor (if you have enabled the Track changes compiler option). Double-click the error message to jump to the source code.
Tip: If you want to see errors from the compiler in the editor without automatically generating compiled files along the way, in your tsconfig.json file specify "compileOnSave": false. This option may be useful if you have some other build tool running the compilation.
Smart code completion for tsconfig.json
WebStorm 2016.1 has greatly improved coding assistance for the tsconfig.json file.
Press Alt-Enter or just start typing to get a list of all properties and their available options.
You can also create a new tsconfig.json file using a template via the New file popup (Cmd-N on OS X and Alt-Insert on Windows and Linux).
– JetBrains WebStorm Team