Enjoy TypeScript in WebStorm

Posted on by Ekaterina Prigara

WebStorm has had TypeScript support for quite some time. As the language continues its evolution toward 1.0, we also continue to improve its support in WebStorm.

Here we’d like to make a brief overview of TypeScript support in WebStorm 7 and some updates related to the latest TypeScript 0.9.1, for example, code completion and inspections for Generics.

Watch the screencast to learn about these improvements, get productivity tips forTypeScript, and look through a list of the most useful shortcuts.

http://www.youtube.com/watch?v=JRkByncBkjc

One of the new features in WebStorm 7 that cannot go unmentioned is access to TypeScript community stubs. They provide TypeScript definitions for a wide range of JavaScript libraries and help code completion. They are available for Download in Preferences | JavaScript | Libraries.

WebStorm provides powerful refactorings for TypeScript code, which are available in the main menu or via these shortcuts:

  • Ctrl+Alt+V (Cmd+Alt+V on Mac) to introduce variable or constant.
  • Shift+F6 – inplace rename variable, class, etc.
  • Ctrl+Shift+M (Cmd+Shift+M on Mac) to extract method.
  • Ctrl+Shift+P (Cmd+Shift+P on Mac) to extract parameter.
  • Move file, copy.

Try the following actions for efficient code navigation:

  • Ctrl+Click (Cmd+Click on Mac) on method, class or variable to navigate to its definition.
  • Ctrl+N (Cmd+O on Mac) – Goto Class name.
  • Ctrl+Alt+Shift+N (Cmd+Alt+O on Mac) – Goto symbol to navigate to methods or global functions/variables.

With Quick Definition action (Ctrl+Shift+I / Alt+Space), these two Goto actions become extremely powerful:

You can also read about TypeScript File Watcher configuration, Debugging TypeScript and basic editor features in our previous post about TypeScript in WebStorm.

Develop with pleasure!
WebStorm Team

Comments below can no longer be edited.

10 Responses to Enjoy TypeScript in WebStorm

  1. Alexandru Nedelcu says:

    November 11, 2013

    This is great news. When is the availability date? Also, will this be available in IntelliJ IDEA 12? When? 🙂

    • Ekaterina Prigara says:

      November 11, 2013

      It’s already available in WebStorm. Most of it is available in TypeScript plugin for IntelliJ IDEA 12 and 13 EAP.

      • R Clarke says:

        November 11, 2013

        There is a Typescript plugin for IntelliJ IDEA 12? I cant find a plugin by that name, including when I browse repositories.

        • Ekaterina Prigara says:

          November 11, 2013

          Actually TypeScript support in IntelliJ IDEA comes with JavaScript plugin.

          • abog says:

            November 20, 2013

            I don’t see the Community Stubs in Idea, though. How do we access those in Idea 12?

            • Ekaterina Prigara says:

              November 20, 2013

              TypeScript Community Stubs are available in IntelliJ IDEA 13 only (in Beta now).

  2. Knockout.js の Utility や Plugin (programming, debugging, monitoring) #html5biz - 松崎 剛 Blog - Site Home - MSDN Blogs says:

    June 25, 2014

    […] (TypeScript 勉強会) の LT を見て関心してしまいましたが、WebStorm 8.0 では「JetBrains WebStorm Blog : Enjoy TypeScript in WebStorm」で紹介しているように、VS + Web Essentials バリの強力な TypeScript […]

  3. TypeScript – Getting Started | Encyclopedia of Daniel says:

    September 6, 2014

    […] also support for TypeScript in WebStorm/IntelliJ. There’s a detailed blog post from JetBrains here. It works essentially the same as the VisualStudio […]

  4. Marcus says:

    November 14, 2014

    How often is the Typescript language interpreter updated in Webstorm? That is, now that we’re on TS 1.3, what sort of timeline are we looking at for Webstorm to support this for formatting purposes?

    • Ekaterina Prigara says:

      November 14, 2014

      We are planning to add support for the new syntax in the upcoming bug-fix update (in a week or two), more concrete support will be added later on. Please follow this issue for updated: https://youtrack.jetbrains.com/issue/WEB-14149