May 3, 2015

Howto: Configure WebStorm for Angular2 and Typescript 1.5-beta

angular webstorm typescript logos

Yesterday I decided to try Angular 2. The 5 min quickstart guide is pretty simple and straightforward. However, pretty obviously, it doesn't cover how to set up typescript 1.5-beta support in favorite IDE. So, when I reached the step #4, I had to have small break to set up the support.

WebStorm 10 has bundled support for TypeScript 1.4. Angular 2 expects using next version, 1.5 which is still in beta. So, this requires a bit of additional configuration.

"WebStorm 10: TypeScript Support" guide section is very detailed and I recommend it if you're going to use typescript constantly. But for our "try only" purpose we need only 2 configuration points to be set up:

  1. Set TypeScript compiler version
  2. Set command line options

First, open Settings > Languages & Frameworks > TypeScript. By default it's disabled but I believe you already have it enabled. If no - enable it.

Next, set the needed compiler version. This is the most tricky part.
  1. Click the "Edit..." button right after "v1.4 (bundled)" label
  2. In the appeared dialog check "Custom directory" radio button and find a directory with typescript 1.5-beta files. On my Windows system it's located under c:\Users\Me\AppData\Roaming\npm\node_modules\typescript\bin. On MacOS/Linux it probably will be located under ~/.npm/node_modules/typescript/bin or /usr/local/lib/node_modules/typescript/bin.
  3. Click "OK"

Lastly, set "Command line options" to --module commonjs --target ES5. This allows to use angular's definition file and use decorators. More information about available command line options can be found here.

That's it. Good luck!

4 comments:

  1. MacOS global location (when typescript installed with npm -g):
    /usr/local/lib/node_modules/typescript/bin

    ReplyDelete
  2. I have problem. angular2.d.ts is having many errors and its not getting resolved. What should i do.

    ReplyDelete
    Replies
    1. Hi Aditya. Could you share the error messages? You can paste them inside a comment or use any public screenshot service as well.

      Delete