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!

7 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
  3. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from TypeScript Online Training . or learn thru Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. ES6 Training in Chennai

    ReplyDelete
  4. Expected to form you a next to no word to thank you once more with respect to the decent recommendations you've contributed here. We are providing AngularJs training in velachery.
    For more details:AngularJs training in velchery

    ReplyDelete
  5. Expected to form you a next to no word to thank you once more with respect to the decent recommendations you've contributed here. Those guidelines additionally worked to become a good way to recognize that other people online have the identical fervor like mine to grasp great deal more around this condition. We are providing AngularJs training in velachry.
    For more details: AngularJs training in velachery

    ReplyDelete