TypeScript and ECMAScript 6 in ReSharper 9.1

Posted on by Anton Lobov

As you may know, the working draft of ECMAScript 6 standard has reached the Release Candidate stage. TypeScript, starting with version 1.4, aligns more closely with this new standard while adding some new features of its own. We on the ReSharper team follow the development of both technologies closely: ReSharper 9.1 already provides full support for TypeScript 1.4, as well as initial support for ECMAScript 6 and TypeScript 1.5.

ECMAScript 6 features

ReSharper 9.1 fully supports the following ECMAScript 6 features:

Template strings

ReSharper understands template strings and tagged template invocations and provides support for them in its code assistance features.

Rearrange code works for template string arguments:

es6_templates_rearrange

Parameter info for tagged templates invocations:

es6_templates_param_info

Create from usage allows you to create functions from tagged template invocations:

es6_templates_create_from_usage

In addition, ReSharper now provides a refactoring for introducing a variable from a selected substring and adding a new template argument for it:

es6_intro_var_demo

Of course, ReSharper will also suggest converting your string-expression concatenations to template strings where possible:

es6_convert_template_demo

2) Lexical, or block-scoped, declarations

ECMAScript 6 introduces the notion of block-scoped declarations, let and const. These declarations, unlike the function-scoped var, are available only within the lexical block-like construct in which they are embraced.

ReSharper provides support for such declarations, as well as inspections and bulk quick-fixes which enable you to convert your var declarations to let and const, if possible. After the conversion it will suggest moving some variables closer to their usages:

es6_block_scope_demo

Also, the Introduce Variable refactoring now lets you choose variable type:

es6_intro_var_kind_demo

3) Lambda expressions

ECMAScript 6, similar to TypeScript, now has lambda expressions. ReSharper supports them and provides a context action to convert between lambda representations:

es6_demo_lambda

4) Destructuring: bindings and destructuring assignments

ECMAScript 6 introduces destructuring assignments and variable declarations. That means that you may provide a pattern to assign a specified path from the assignment source to some variable or expression. ReSharper 9.1 now supports this feature.

es6_destructuring_2

Note that Visual Studio doesn’t currently support all standard options for destructuring declarations and assignments, meaning that valid ECMAScript 6 code may be red in Visual Studio:

es6_false_positive_vs

5) New numeric literals

ECMAScript 6 introduces a new kind of octal literal as a 0O + number, and binary literals as 0B + numbers. As with the other numeric literal types, ReSharper provides you with an option to convert between these forms and their decimal representation.

es6_literals

As ECMAScript 6 is a huge extension over its predecessor, it’s taking us more time to polish features for it. At this time, ReSharper offers initial support for some of the new ECMAScript features, including for-of loops, computed property names, generators, class declarations, and modules.

es6_keyword_completion

We’re hard at work to bring you full support for ECMAScript 6 in the next versions of ReSharper. Stay tuned.

Oh, and please note that ECMAScript 6 support should be explicitly enabled in ReSharper options:

es6_set_level_demo

TypeScript 1.4

TypeScript 1.4 brought several new features which ReSharper now fully supports.

Union types represent a notable extension of TypeScript’s type system. With their help, you can avoid losing type information for entities which cannot be represented by a single type.

ReSharper 9.1 provides full support for union types code generation, quick-fixes and context actions. For example, implemented members now use union types whenever possible, and you may specify corresponding union types explicitly for variables which have ‘any’ type.

ts14_unions

Union types are accompanied by type guards, which allow you to limit the variable type in a scope surrounded by a type check. ReSharper 9.1 supports them too:

ts14_guards

TypeScript 1.4 also introduced type aliases, for providing your own names for complex type combinations. As an extra bonus, ReSharper substitutes them with the aliased type in contexts where the corresponding type alias is not available.

ts14_type_alias

And finally, lexical declarations and template strings were integrated into TypeScript 1.4, and they are supported by ReSharper to the same extent as for plain ECMAScript 6.

ts14_es6

TypeScript 1.5

TypeScript 1.5 is coming, representing an even bigger step forward compared to ECMAScript 6 support. ReSharper is catching up with the new features introduced into the language.

Destructuring variable declarations and assignments are supported:

ts15_destructuring

ReSharper is also aware of ES6-style export and import declarations, and provides familiar assistance to what you had with TypeScript’s own exports and imports:

ts15_new_imports

Starting with TypeScript 1.5, it’s no longer possible to use TypeScript-style exports and imports when targeting ECMAScript 6. No problem! ReSharper will help you migrate your code to adhere to this new requirement:

ts15_convert_obsolete_constructs

TypeScript 1.5 also introduces the notion of well-known symbols from ECMAScript 6, and they are fully supported, too:

ts15_well_known_symbols

And finally, the for-of loop is supported:

ts15_forof

Note that TypeScript 1.5 support in ReSharper 9.1 is still experimental and has the following technical limitations:

  • Simultaneously exporting “default” and other elements from a module is not currently supported by ReSharper 9.1.
  • Using ECMAScript 6 specific features requires you to add “lib.es6.d.ts” file to your solution. For use with ReSharper it should be renamed to “lib.d.ts”.
  • Decorators are not currently supported.

All these technical limitations will be addressed in the next version of ReSharper, which is expected to provide full support for TypeScript 1.5.

Comments below can no longer be edited.

16 Responses to TypeScript and ECMAScript 6 in ReSharper 9.1

  1. LordJZ says:

    April 21, 2015

    Tried 9.1, was disappointed at how bad it was at supporting ES 6 and TS 1.4. So, so many bugs and false positives.

    Even the destructuring stuff mentioned in this article is basically unusable:

    function f(a: number, b: string) { // 2 errors here
        return { a, b }
    }
    
    var a = f(10, "ss").a; // error
    • Anton Lobov says:

      April 21, 2015

      Hi, LordJZ, thanks a lot for reporting. The thing you provided is a known issue, fix is on the way. It was not in the bugtracker, I created a ticket so that you’ll be able to follow it: https://youtrack.jetbrains.com/issue/RSRP-437988. By the way, it’s not a destructuring thing, it’s called short-hand object literal properties.

      Could you tell please about the others “So, so many bugs and false positives.” Are they different from the first problem, or do you have the same problem everywhere througout your code?
      Thanks!

      • LordJZ says:

        April 21, 2015

        Here’s a test project I sent to you earlier with now 4 basic TS bugs: https://dl.dropboxusercontent.com/u/9241118/ReSharperTSFalsePositives.zip

        There are more, but it’s a start. Unfortunately, I feel that 9.1 RTM has more bugs than e.g. EAP 4 I loved so much.

        If some of these are fixed in your internal builds (waves?), is it possible to make these builds public (at least to license holders)? 9.1 is already bugged to death, I don’t mind having a few more but better TS support.

        • Anton Lobov says:

          April 22, 2015

          Thanks a lot for reporting, two issues are fixed in what will be a bugfix update to 9.1, which will be released relatively soon.

          If there’s something else to report, feel free to use our bug tracker. 😉

        • Anton Lobov says:

          April 30, 2015

          You’re welcome to try ReSharper 9.1.1 RC:
          https://confluence.jetbrains.com/display/ReSharper/ReSharper+9.1.1+EAP

          It should fix bugs reported by you. As to ‘implicit any’ checks, now you may go to ReSharper Settings -> Inspections Severity and disable them as a workaround, if they don’t work properly for you now.

    • Jouda says:

      April 21, 2015

      Exactly, the whole ES6 and TS experience is really bad. The article conveniently does not mention many issues, most notable one being that it R# does not override VS internal error highlightings. That effectively means that it’s pretty unusable for anything ES6-related and will probably never work correctly in VS2013 (which won’t get ES6 support).

      • Anton Lobov says:

        April 21, 2015

        Hi, Jouda. Do you have some issues not related to VS problems with ES6? If yes, please report them.

        Unfortunately, we cannot override JS highlightings provided by VS in any way, their API doesn’t provide such an option, and they don’t want to provide it. So, only VS2015 is a viable option for ES6 development. Hope they’ll fix remaining issues in their ES6 compatibility till the release.

      • Anton Lobov says:

        April 21, 2015

        Sorry, I was wrong about VS not providing any means for disable error highlightings for JS. Here it is:
        http://i.imgur.com/RCdK7Od.png

        It’s VS2013, and it disables at least syntax errors.

        Will check out whether there exist some API for disabling syntax errors in VS2013-, so that ReSharper will do that by default if level is ES6+, at least.
        Thanks a lot.

      • Anton Lobov says:

        April 22, 2015

        As we’ve found a workaround for VS own highlightings, hope that your issue is closed. If not, feel free to report other problems!

  2. Dew Drop – April 21, 2015 (#1997) | Morning Dew says:

    April 21, 2015

    […] TypeScript and ECMAScript 6 in ReSharper 9.1 (Anton Lobov) […]

  3. Anton Lobov says:

    April 21, 2015

    So, a short notice for all users who experience problems with VS-provided highlightings for ES6 in JavaScript VS editor.

    You are able to disable them manually in VS options:
    http://i.imgur.com/RCdK7Od.png

    Sorry for not mentioning this in the article. And thanks to those who found this.

    • Dmitry says:

      August 21, 2015

      Resharper seems to think values are never used if they are declared outside a class (in a module), and only used inside that class using EcmaScript 6. The variable a will show a warning that it not being used. Even if I turn that warning type off, the line will be grayed out.

      Here is an extremely simplified example:

      (function ($) {
      const a = “test”;

      class Cls {
      method() {
      console.log(a);
      }
      };

      return new Cls();
      });

      • Anton Lobov says:

        August 21, 2015

        Thanks a lot for your report, Dmitry!
        I created an issue for it: https://youtrack.jetbrains.com/issue/RSRP-447321. Seems that block-scope types weren’t correctly added to control flow value analysis, will investigate and fix this. Unfortunately, this bug reproduces on 9.2 release, too.
        The only workaround now is to use “disable once with comment” for this issue type.

        • Dmitry says:

          August 26, 2015

          This also the case for arrow functions.

          Thanks for the quick response.

  4. The Morning Brew - Chris Alcock » The Morning Brew #1844 says:

    April 22, 2015

    […] TypeScript and ECMAScript 6 in ReSharper 9.1 – Anton Lobov shares a look at the support for ECMAScript 6 and TypeScript in ReSharper 9.1, including templates, block scoped declarations, binding and destructuring assignments, and support for TypeScript 1.4 and 1.5 […]

  5. ReSharper 9.1 bekommt TypeScript- und ECMAScript-6-Funktionen spendiert - entwickler.de says:

    June 24, 2015

    […] und unterstützt erstmalig auch ECMAScript 6 sowie TypeScript 1.5. ReSharper wird damit um einige neue Sprachfeatures erweitert, etwa um Template Strings und […]

Subscribe

Subscribe to .NET Tools updates