WebStorm 2018.1 EAP, 181.3007: better support for dynamic imports, new in TypeScript support

Posted on by Ekaterina Prigara

The new WebStorm 2018.1 Early Preview build (181.3007.17) is now available

You can update via Toolbox App, or download the build here and install it beside your stable WebStorm version.

Download WebStorm 2018.1 EAP

Better Extract method refactoring

Extract method refactoring now works without any additional dialogs, so it no longer takes your attention away from the code.

inplace-extract

You can still open a refactoring dialog if you press Alt-Cmd-M again. In the dialog you can see the list of function parameters and select whether the function will be defined as function name() or let name = function().

Improved support for dynamic imports with import()

If you are using dynamic imports in your JavaScript or TypeScript code, you’ll notice a whole bunch of improvements.

First, you’ll get code completion for the properties of the imported module, and you will be able to jump back to its definition with Cmd-click.

dynamic-import-completion

It doesn’t matter whether the imported file has default or named exports, WebStorm will correctly find the usages. And if you rename a named export of the module, its usages will be correctly updated in normal and dynamic imports.

rename-in-dynamic-import

New in TypeScript support

Adding a type guard

In TypeScript, there are new quick-fixes called “Enclose in type guard” and “Prefix with type guard” that are shown in cases when a used method is not available for one of the types in a union type.

To see the suggestions, just hit Alt-Enter when the cursor is on the highlighted code.

enclose-in-type-guard

WebStorm will use instanceof or discriminant property type guards when appropriate.

Completion for a list of parameters

Now when you call super() in the class constructor, one of the suggested options will be a list of all the parameters available in the constructor of the parent class. This a small thing, but it can save you some time because you won’t have to select every parameter separately.

param-list-in-constructor

You will also see this suggestion if two methods have a similar signature and you call one method in another one.

param-list-in-function

Rename for property names in strings

In some cases, in TypeScript a property name can be used in a string. Now you can easily rename such properties using Rename refactoring – WebStorm will make sure that these usages are not forgotten.

rename-srting-usages-of-prop

Open in Terminal

For folders there’s now a new action Open in Terminal – it opens the integrated terminal on the folder’s path. The action is available via Find action or via the context menu of this folder. For files, it will go to the path of its parent folder.

WebStorm Team

Comments below can no longer be edited.

5 Responses to WebStorm 2018.1 EAP, 181.3007: better support for dynamic imports, new in TypeScript support

  1. Artem says:

    January 30, 2018

    Thanks!

    What name is for Typescript feature used in “Rename for property names in strings”?

    About generics with field names.

  2. Anton Lobov says:

    January 30, 2018

    TypeScript feature is called “keyof”, or, more formally, “index type query”: https://github.com/Microsoft/TypeScript/pull/11929.

    Rename for property names in literals was inspired by this request: https://github.com/Microsoft/TypeScript/issues/11997.

    WebStorm now can also rename property declarations defined directly in type aliases and used via mapped types (https://github.com/Microsoft/TypeScript/pull/12114), e.g.,
    type Props = “name” | “surname”;
    type Person = { [T in Props | “age”]: string};
    var p: Person;
    p.name; p.surname; p.age; // <– you can rename them

  3. Artem says:

    January 31, 2018

    Awesome, thanks!

  4. Nugzar says:

    April 25, 2018

    When I’m including component in simple way
    import Component from ‘./my-component’;

    Inside my-component.js I can press CTRL+click on export default and see where component includes.

    But when I use I’m using react-loadable and include modules like this

    const LoadableComponent = Loadable({
    loader: () => import(‘./my-component’),
    loading: Loading,
    });

    Inside my-component.js I can’t go to usage place by pressing CTRL+click on default. It shows that “No usages found”. But I’m importing it by react-loadable.
    Can you fix this?

    WebStorm 2018.1.2 Build #WS-181.4668.60

    • Ekaterina Prigara says:

      April 25, 2018

      Hello,

      There’s no way WebStorm can understand from the static analysis of this code that LoadableComponent is actually your Component. To resolve the component in this case we need to specifically support this pattern. Please submit a feature request about that on our issue tracker: https://youtrack.jetbrains.com/issues/WEB
      Thank you!