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.

ts-compile-tip

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.

ts-compiler

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.

ts-compiler-tool-window

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.

completion-tsconfig

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

create-tsconfig

– JetBrains WebStorm Team

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Tutorials and tagged . Bookmark the permalink.

40 Responses to How to compile TypeScript in WebStorm

  1. Malindges says:

    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

  2. Robin says:

    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”: [
    “jspm_packages”,
    “typings”
    ]
    }

  3. John Kamy says:

    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:

    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:

    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:

      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:

        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:

    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:

      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:

    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 ;(

  8. Nikos says:

    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

  9. Nikos says:

    Ah, I see now thanks.

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

  10. Rick O'Shea says:

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

    What

    • Andrey Starovoyt says:

      Hi.
      >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:

    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:

    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:

    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:

      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:

    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:

      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:

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

        • Matt Welke says:

          Hi Ekaterina,

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

          • Ekaterina Prigara says:

            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:

            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:

    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:

      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

Leave a Reply

Your email address will not be published. Required fields are marked *