Features WebStorm

TypeScript Support in WebStorm 6

One of the evolutions in JavaScript development is the new TypeScript language, an open-source superset of JavaScript that allows us to write code in a typed language which compiles to JavaScript.

At JеtВrаins wе wоrk tirеlеssly tо bring аbоut mоrе аnd bеttеr suрроrt fоr this lаnguаgе.
WebStorm 6 introduces full support for the TypeScript language through 3 new features: File Watchers, Sourcemaps and general support for working with code.

File Watchers

When editing a .ts file, WebStorm will detect that we are using a type of file which it can “watch” for us and proposes to add a TypeScript file watcher. When added, WebStorm will compile our TypeScript file automatically whenever we make a change to it.

WebStorm does not bundle the TypeScript compiler. We can install it from the TypeScript website or using the node.js package manager by invoking npm install -g typescript.

For the first .ts file in our project we have to provide WebStorm with the path to the tsc compiler which transforms TypeScript into plain JavaScript. The help contains more information on other options available from this dialog.

From now on, whenever we make a change to our source code, the TypeScript file watcher will automatically compile our code into JavaScript. We can see the generated files from the project pane. As you can see from the following screenshot, the TypeScript file watcher generates both a JavaScript file and a .js.map file.

The Car.js file in our example is the generated JavaScript file. The Car.js.map file is a so-called “sourcemap.” Sourcemaps allow us to navigate between our TypeScript code and the JavaScript files that are created after the compilation process.

Debugging with sourcemaps

WebStorm 6 can leverage the information provided by sourcemaps and use it to debug JavaScript files. For example, we can place breakpoints in a TypeScript file and the debugger will pause at the breakpoint and display the relevant information from that line.

By clicking the debug icon in the toolbar (or pressing Shift+F9 or Ctrl+D on Mac), we can debug our code. Even though the browser is executing JavaScript code, the sourcemap allows us to debug into our TypeScript code and break on specific lines, inspect variables and so on.

Working with code

What would support for a language be without WebStorm’s familiar features such as completion, navigation and refactoring? WebStorm 6 introduces these concepts for TypeScript. Code completion is available for TypeScript modules and classes.

Find Usages (Alt+F7 both Win and Mac) will show us a list of all references to a given class or variable. As you can see from the screenshot below, we get both the typed usages (all usages in other TypeScript code) and dynamic usages (in JavaScript files and compiled TypeScript files).

Now where’s that class? The Go to class action (Ctrl+N or Cmd+O on Mac) can be used with TypeScript as well.

Refactoring is possible as well. If we select the speed variable from our example and press Shift+F6, we can rename this variable and automatically update all references to it.

Please download the latest build, provide as much feedback for bugs and feature requests here, and leave questions in the comments below or in our forums!

Develop with pleasure!
– JetBrains WebStorm Team

Comments below can no longer be edited.

9 Responses to TypeScript Support in WebStorm 6

  1. Avatar

    Madis says:

    February 27, 2013


  2. Avatar

    Crypted says:

    February 28, 2013

    Awesome! Will there be same for Resharper ?.

  3. Avatar

    anatooly says:

    March 2, 2013

    For PhpStrom 6 (example last EAP) need manual install Edit Watcher plugin at Jetbrains repository, for correct work.

  4. Avatar

    TomF says:

    March 5, 2013

    When using WebStorm 6 and the node.js TypeScript compiler, to clarify the screenshot above of the Watcher Settings, for the ‘Program’ setting you need to browse to C:\..\AppData\npm\tsc.cmd

  5. Avatar

    Brett Thomas says:

    March 5, 2013

    Are these changes in the current version of Idea Intellij?

  6. Avatar

    Kallis says:

    March 25, 2013

    What file do I need to download from the TypeScript website?

    • Avatar

      Maarten Balliauw says:

      March 25, 2013

      You will need the Node.js commands from http://www.typescriptlang.org/#Download
      The file watcher can then be configured to use C:\Users\\AppData\Roaming\npm\tsc.cmd as the compiler.

  7. Avatar

    Kallis says:

    March 25, 2013

    Thanks, works now 🙂

  8. Avatar

    denis gulin says:

    June 19, 2013

    Cool! but, what about support of typescript 0.9?