A first look at the TypeScript support in WebStorm 6 (EAP)

JE TypeScript

I never really used WebStorm before, but I’ve been wanting to give it a good go for a while. Now with announced TypeScript support I spent a few hours playing with it.

First, it’s a EAP (Early Access Program) version, and as such many things are expected not to work 100%. It’s even an _early_ EAP version, the first one for version 6 I believe.

However, I found it to work surprisingly good. Automatic code completion and code navigation is there and helps, some (not all) compiler errors are shown with squiggles. Referenced files works as expected.

A few additions to make the experience better

There is no built in function to run the compiler. So to compile a ts file you’d need to write “tsc filename.ts” in the command prompt. Easy enough, but to make that experience a little bit better it’s easy to add TSC as an external tool. With that in place you can right click any ts file to compile it. Click Settings and go to External tools. Then add a Tsc one (see picture).

Another conveniant and easy thing to do is to add a Typescript file template to be able to easily add new Typescript files. Just right click the file tree and click New – Edit file templates. Add “Typescript” with extension “ts” and you’re done.

Write some code
Add a folder for your own code, and add two files in it:

MyModule.ts:

module MyModule {
    export function Add(x:number, y:number):number {
        return x+y;
    }
}

App.ts:

///<reference path="MyModule.ts"/>

var result = MyModule.Add(1,2);
var shouldNotCompile = MyModule.Subtract(2,1);
var badTypes = MyModule.Add(1,2,3);
alert (result);

Notice that you get code completion for the Add function, with suggested parameters and types. And the editor shows that the Subtract function is not there. (There’s even a “create method Subtract” help in the context menu, but that one does not succeed to place the new function in the actual module file).

Now right click App.ts and run the TSC external tool to compile the file. The Typescript compiler does it’s work and compiles each referenced file aswell (MyModule.ts). However, as expected we do get some errors (see image):

One thing that the WebStorm IDE has which I havent seen in Visual Studio is it colors unused variables grey (see shouldNotCompile and badTypes). Very nice.

Now fix the code to get rid of the errors:

///<reference path="MyModule.ts"/>
var result = MyModule.Add(1,2);
alert (result.toString());

And compile again. And then add a Html file to test your code:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="src/MyModule.js"></script>
    <script src="src/app.js"></script>
</head>
<body>

</body>
</html>

Open the Html file in a browser and you should get an empty page and a message box with the number 3.

Pretty nice huh? But what about functions like debugging, testing and minifying the javascript?

Debugging
I did not test much, but it seems like debugging works, by adding –sourcemap as a parameter to the TSC external tool the compiler adds the necessary sourcemap. And then adding a breakpoint in the js file I got the tool to stop at the actual point and with the possibility to inspect local variables, step execution and so on (see image).

Testing
And as to add testing, I managed to do so too with the help of the JsTestAdapter. Which I did not like very much to be honest. If someone likes to know how I did it, here’s a few notes:

Edit (2013-02-06): See this sample with Async testing in WebStorm

Add a tests folder, and a file for the tests. Write the following code:

///<reference path="../src/MyModule.ts"/>
///<reference path="../defs/TestCase.d.ts"/>

TestCase("MyModule",
    {"test Add numbers": ()=> {

    var result = MyModule.Add(1,3);
    assertEquals(3,result);

}});

Click TestCase and press Alt+Enter. Choose to “Add JsTestDriver assertion framework.”.

Add the (very simplified) definition file for the test syntax:

/defs/testcase.d.ts

var TestCase, assertEquals;

Create a test definition file in the root:

load:
  - src/MyModule.js

test:
  - tests/MyModuleTests.js

Add a test run/debug configuration for that test definition file (see image). Click to run that test. You will be prompted to start JsTestDriver and then to “capture a browser” (open the written link in Chrome).

Minifying
I did not find any functionality or plugin that could help me minify and bundle my javascript. But the Google Closure compiler can do that, it’s a java program just like WebStorm. I downloaded that file and run it with the following syntax to minify and bundle my two files:

java -jar C:\google-closure\compiler-latest\compiler.jar --js ts/mymodule.js --js ts/app.js --js_output_file ts/app.min.js

Conclusion
I like WebStorm Typescript a lot already, and it’s only a EAP still. And I know there’s a lot more goodness to find in the WebStorm IDE which I havent had time to check out yet.

The things that I come to think of that makes Visual Studio still a little better TypeScript experience in my opinion is the two extensions, Web Essentials and Chutzpah. However, I think that when I learn more about the WebStorm IDE + when the version 6 is finished I might very well reconsider my first choice for a TypeScript IDE.

4 thoughts on “A first look at the TypeScript support in WebStorm 6 (EAP)”

  2. I’ve been wanting to give WebStorm a go for a while myself. I’ve been using Visual Studio for years but with the the evolution of web development towards client side scripting I don’t need most of its features a lot of the time. One bugbear with VS is its load and build time which is why I’m keen to look at other products. Also there are still things you can’t do in VS with js (refactoring which you get in Eclipse, a free tool although I understand typescript can be refactored).

    Now that TypeScript is being adopted elsewhere I can see myself switching to WebStorm when they finally bring version 6 out. Although I’m impressed with TypeScript I was reluctant to use it because I wasn’t sure there’d be much support with the open source community outside MS devs but hopefully that won’t be the case now and I can get stuck right in 🙂

    Reply

  3. […] I wont go into much details how to get started with Typescript. You can download the source from the official page of the language: http://www.typescriptlang.org/, then if you are a Windows 8 or at least Windows 7 user and preferably (not my case) .NET developer you’ll have a very easy time to get started with coding. There is a plugin for Microsoft Visual Studio 2012 downloadable from the same source. I’ve tried installing on Vista, after too many trials and errors finally got working, unfortunately without code highlighting and code completion. So in the end decided to write a plugin for Sublime Text 2 editor (my editor of choice). Here is the Stackoverflow thread explaining the process to automate the code transcription from TS to JS. The only weakness is – at the time of this writing –  there isn’t a code completion and live time error checking plugin implemented. A good news is that Webstorm 6.0 is already offering support for Typescript. This article summarize in a few words the capabilities of Typescript in Webstorm perspective: http://joeriks.com/2012/11/20/a-first-look-at-the-typescript-support-in-webstorm-6-eap/. […]

    Reply