Webstorm logo

The WebStorm Blog

The Smartest JavaScript IDE

Tips & Tricks

How to Compile TypeScript in WebStorm

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).

Enabling source maps for debug

If you’d like to debug your TypeScript code using WebStorm or Chrome, make sure you add these two compiler options in the project tsconfig.json file:

"sourceMap": true,
"inlineSources": true

That way TypeScript compiler will generate source map file with inlined sources and when debugging the code the breakpoints set in the TypeScript code will be properly hit.

Using different version of TypeScript compiler

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.

Experimental: WebStorm 2016.2 adds experimental integration with the TypeScript internal service that provides code completion and analysis. It might provide more precise results and work faster compared to the WebStorm’s own coding assistance. At the same you will be able to benefit from WebStorm’s refactoring capabilities and more. You can enable that in Preferences | Languages & Frameworks | TypeScript.

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

Comments below can no longer be edited.

41 Responses to How to Compile TypeScript in WebStorm

  1. Malindges says:

    March 31, 2016

    How to run freshly compiled ts in Webstorm after I made a change? It’s usually running previously compiled JS. I have to wait for about 2 seconds to make sure it is recompiled and JS files updated

    • Andrey Starovoyt says:

      March 31, 2016

      Hi. Unfortunately typescript compilation is an asynchronous process but you can run ‘compile current file (or all)’ action manually to check that compiled code is up to date. There is also issue https://youtrack.jetbrains.com/issue/WEB-17705 for running compilation as ‘before launch’ task.

  2. Robin says:

    April 1, 2016

    compileOnSave isn’t working for me. Despite of this option is set to false, WebStorm creates compiled javascript files for each ts file.

    I’m using the latest build of WebStorm 2016.1.1.. Its neither working with the build-in compiler nor with a custom one (tsc v1.8.9).

    My tsconfig.js:

    “compilerOptions”: {
    “module”: “system”,
    “target”: “es5”,
    “experimentalDecorators”: true,
    “emitDecoratorMetadata”: true,
    “sourceMap”: true,
    “pretty”: true
    “compileOnSave”: false,
    “exclude”: [

    • Andrey Starovoyt says:

      April 4, 2016

      Hi. Please check that option ‘Use tsconfig.json’ is selected in the typescript settings.

      • Robin says:

        April 5, 2016

        Hey, “Use tsconfig.json” is checked and my tsconfig-file is definitely found:
        WebStorm says: “TypeScript Compiler: Discovered tsconfig.json: src/tsconfig.json”

  3. John Kamy says:

    April 2, 2016

    I’m curious if it this is possible in WebStorm: I do changes in file (for example I change type of function param from number to string) and somewhere in another file I call this function. There will be an error in typescript compiler, but I wont see it until I manually open TypeScriptCompiler console. Is it possible to make it automatically appear showing that error or at least webstorm gives some hint that there are errors in project?

  4. Max Serebrankin says:

    April 4, 2016

    I got the same question. When I do write Java (not JavaScript/TypeScript) code, click ‘Run’, IDEA will compile, build and only then it will run with my code changes applied. Is it possible to achieve same behaviour in TypeScript in IDEA/WebStorm?
    Because right now once I change my code I can’t be sure that when I click ‘Run’ IDEA/WebStorm compiled all my TS files into JS & executes my latest changes instead previous ones.

    P.S. I’m currently writing a CLI using TypeScript for Node4 and this behavior is very annoying 🙁

  5. Ryan Rahlf says:

    April 5, 2016

    This is terrific stuff, but now I’m struggling to write unit tests in TypeScript against my TypeScript server-side node.js code. I’m new to TypeScript, but I understand that my unit tests (mocha) will likely need to be transpiled before being run. How can I get WebStorm to run my Mocha unit tests written in TypeScript, while also keeping the transpiled js test files out of my build folder (so they don’t get deployed).

    • Sergey Simonchik says:

      April 5, 2016

      As a possible solution, you can run *.ts files with unit tests directly, instead of running the generated *.js files:
      1. npm install ts-node
      2. specify --require ts-node/register in “Extra Mocha options” field of Mocha run configuration

      • Ryan Rahlf says:

        April 6, 2016

        Thanks Sergey, this is a great solution and I’ve got it working. In addition to this I also needed a secondary tsconfig in my tests folder to get the correct ambient typings so my ts-node could compile without the “duplicate declaration” errors.

  6. brett says:

    April 29, 2016

    Is it possible for Webstorm to resolve .d.ts files under my project’s `typings` folder? I have a separate build script that handles compilation, but Webstorm marks variables like “angular” as undefined. I know I can download and include DefinitelyTyped packages under Frameworks->Javascript->Libraries, but ideally Webstorm would just read definitions I already have installed under `typings`.

    Additionally, some of our companies internal libraries, installed under `node_modules` have their own typings. I would love to be able to resolve those as well.

    • Ekaterina Prigara says:

      May 2, 2016

      WebStorm indexes typings folder and definition files in it like any other JavaScript files in the project. Whether you have d.ts files right in the project or set up as a WebStorm JavaScript library, the IDE should be able to resolve objects from it.
      Here’s an example with AngularJS 1 project – node_modules folder is completely excluded, not additional libraries are set up:

      If it doesn’t work for you, please report an issue and provide a bit more details on the setup. Thanks!

  7. Tomas Trescak says:

    May 12, 2016

    Is it normal that when I click on compilation error it opens a “non-project” file? When I try to edit that file I always receive a warning that I am editing non-project file and I need to allow edition specifically. This file, of course, belongs to the project and when I open it from the tree view all is good but is opened on a separate tab ;(

    • Andrey Starovoyt says:

      May 12, 2016

      Hi! It looks like a bug if the file is a project file (please check that parent directory isn’t excluded from the project). Could you please file an issue on https://youtrack.jetbrains.com/issues/WEB with a screencast?

  8. Nikos says:

    July 10, 2016

    Why am I required to list all my files? I only list the Main.ts one and the normal tsc compiler works, I get:

    Warning:File was not compiled because there is no a reference from tsconfig.json

    • Ekaterina Prigara says:

      July 10, 2016

      Please have a look at the TypeScript documentation for tsconfig.json: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
      If you have tsconfig in you project and checked in the TypeScript compiler preferences that you’d like to use it, then you have to specify the files explicitly.

  9. Nikos says:

    July 11, 2016

    Ah, I see now thanks.

    btw, can you add an email subscribe to these comments? I prefer not to poll.

    • Ekaterina Prigara says:

      July 11, 2016

      Unfortunately, our WordPress setup can’t send notifications about the comments or replies 🙁
      We hope to improve that some time soon.

      • Sergey says:

        July 22, 2016

        +1 for notifications 🙂

  10. Rick O'Shea says:

    July 30, 2016

    Enabling typescript in WebStorm immediately starts re-compiling files in the node_modules folder. That is unwanted behavior for the vast majority of users. The vast majority of users will then have to research that issue, and apply what should have been the default. The Sass module is also guilty of this, among others.

    So, there is a TypeScript preferences dialog with a “use tsconfig.json” checkbox, but nowhere to actually supply the path to that file. I assume that’s because it uses the tsconfig.json present in any folder or child folder?

    There is a “scope” option for tracking files in the TypeScript preferences.

    WebStorm should not be compiling .ts files or .scss files or anything else in node_modules. It shouldn’t be searching it, either unless specified. Since nobody but nobody wants that as the default, why not exclude node_modules out of the box (instead of having thousands of developers repeat the same fix-ups, or getting subtle bugs as WebStorm messes with their node_modules installations).

    I’ve excluded node_modules from the project, and now I just have the inconvenience of explicitly including it when I need to search node_modules (sometime we do).


    • Andrey Starovoyt says:

      August 2, 2016

      >I assume that’s because it uses the tsconfig.json present in any folder or child folder?
      Yes, IDE searches all tsconfig files in the project (exclude node_modules directory). It is a recommended way to use the typescript compiler integration.

  11. Bela Vizy says:

    November 22, 2016

    Why isn’t there a way to map back to the TypeScript file (*.ts) from a stack trace JavaScript lines (*.js) in the command or the mocha window? It would be very useful.

  12. Tarunam says:

    August 22, 2017

    I am getting compilation error like “Error:(7, 1) TS2304:Cannot find name ‘describe’.” Please help me resolve it. I tried adding the reference file import ‘jasmine’. But nothing seems to work.

  13. Joseph Calzaretta says:

    January 31, 2018

    What versions of TypeScript are supported? If I try to run TypeScript v2.7 I get “Error:Initialization error (typescript). Cannot read property ‘getExecutingFilePath’ of undefined”. It would be helpful to have guidance here.

    • Ekaterina Prigara says:

      February 1, 2018

      TypeScript 2.7 is supported in WebStorm 2017.3.
      What WebStorm version do you use? Can you please check path to the TypeScript package in Preferences | Languages & Frameworks | TypeScript.

  14. Matt Welke says:

    March 13, 2018

    I’m having issues getting WebStorm to compile my TypeScript properly. I’m coming from VS Code, and I used the tsconfig.json file from Microsoft’s TypeScript-Node-Starter repo (https://github.com/Microsoft/TypeScript-Node-Starter/blob/master/tsconfig.json). In it, the outDir is set to “dist”, meaning compiled files should be placed in a specific directory, not placed alongside the source code files. VS Code interprets this tsconfig.json file properly, giving me a default build task I can run. WebStorm seems to get confused by this. The “Compile TypeScript” before launch task doesn’t run. And the task itself gets confused by the “dist/index.js” value for the task’s “JavaScript file” (since before compilation, that file won’t exist). If I click “continue anyway” when I run the configuration, it fails because the compiled “dist/index.js” isn’t there. It doesn’t run the compile step.

    Is this a bug I’m experiencing, or is there a unique way I need to set up WebStorm to work with tsconfig.json files that specify outDir values?

    • Matt Welke says:

      March 13, 2018

      After more tinkering, I found the source of my issue. WebStorm can’t complete the pre-launch TypeScript compile unless I comment out the “esModuleInterop”: true, from the tsconfig.json. While I’m able to use the project’s TypeScript compiler manually in my terminal to compile the project (with the command “./node_modules/typescript/bin/tsc), WebStorm can’t compile it with this compiler option.

      • Ekaterina Prigara says:

        March 13, 2018

        Hello Matt,
        What is the configuration that you want to run after the files are compiled?

        • Matt Welke says:

          March 15, 2018

          Hi Ekaterina,

          It was a Node configuration, where the JavaScript file to run was set to “dist/index.js”.

          • Ekaterina Prigara says:

            March 16, 2018

            And what TypeScript version you use in WebStorm for this project? You can check in Preferences | Languages & Frameworks | TypeScript. The problem might be related to this issue.

          • Matt Welke says:

            March 16, 2018

            I was using version 2.7.2. I set the project to use the TypeScript installed as a dev dependency (and I installed the latest version as a dev dependency). I remember I also tried with the bundled version, which I believe was 2.6.x, at which point the esModuleInterop compiler option was unavailable, so the issue was irrelevant.

            Thankfully, this issue doesn’t impact things too badly. I can easily omit this new 2.7 feature and use CommonJS import syntax for CommonJS modules. But it definitely looks like there’s something going on with esModuleInterop and WebStorm right now.

  15. Eduardo Hernandez Soto says:

    July 29, 2019

    Hi Everyone,

    When I try to open a .ts file from the terminal in webstorm it opens webstorm(or if webstorm is already open it focuses the window) but the file doesn’t load into the editor. I’ve tested opening files from the terminal with .js, .css, .scss, and .json files and all those work. I figured maybe .ts files didn’t open because they weren’t supported in webstorm but that’s not true so I’m stuck. Anyone else seen this, or able to point me in the right direction?

    Let me know if there’s a better forum to post this question in.

    • Eduardo Hernandez Soto says:

      July 29, 2019

      Forgot to add this when I first posted it:
      I’m using a MacBook Pro (Retina, 15-inch, Mid 2015), Mojave 10.14.6. Webstorm 2019.1.1

      • Ekaterina Prigara says:

        July 29, 2019

        What command do you use to open files? `webstorm file.ts`? Thanks!

  16. Max Shekera says:

    March 5, 2020


    I have a project with following structure:
    – dist # this gets created by “tsc”
    — entry.js
    — file.js
    – src
    — entry.ts # imports server.js
    — file.js
    – tsconfig.json

    “tsconfig.json” looks like this:
    “extends”: “../../tsconfig.base”, # contains stuff irrelevant for this example
    “compilerOptions”: {
    “baseUrl”: “./src”,
    “outDir”: “./dist”,
    “allowJs”: true
    “compileOnSave”: true,
    “include”: [

    When I update file “src/file.js” I’d like it to be rebuilt in “dist/file.js”

    This works as expected when running tsc directly – “tsc –project ./tsconfig.json –watch”

    But WebStorm’s TypeScript service doesn’t update “file.js” (although it gets updated if I change/re-save “entry.ts”).

    So, is there a way to make WebStorm’s TypeScript service to be triggered by .js file change (so it’ll work the same as “tsc”)?