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

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

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Early Access Preview and tagged , . Bookmark the permalink.

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

  1. Artem says:

    Thanks!

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

    About generics with field names.

  2. Anton Lobov says:

    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:

    Awesome, thanks!

  4. Nugzar says:

    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:

      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!

Leave a Reply

Your email address will not be published. Required fields are marked *