TypeScript and JavaScript in ReSharper 9.2

ReSharper 9.1 marked our first attempt at supporting the future-of-the-Web technologies:  ECMAScript 6 and TypeScript 1.5. In ReSharper 9.2 we are enhancing this support while taking a look deeper into the future by extending this support to many features of TypeScript 1.6. To make your development even more fun, now we provide support for regular expressions in JavaScript and TypeScript code. And finally, two small but useful features made their way to our TypeScript support: Import completion and Go to type of symbol.

ECMAScript 6 support improvements

ReSharper 9.2 now supports ECMAScript 6 classes, including features like Find usages, Rename, and Code Completion:

ECMAScript 6 classes support in ReSharper 9.2

To make it easier to get accustomed with new destructuring constructs, ReSharper now suggests converting some code patterns to destructuring.

For example, subsequent indexing may be turned into a destructuring declaration or assignment, as suggested by ReSharper 9.2:

Destruct declaration quick-fix

Subsequent indexing in object literal properties can also be simplified to using a destructuring and short-hand properties. You get hints that look like this:

Destruct shorthand properties quick-fix

TypeScript 1.5 support enhanced

TypeScript 1.5 introduced decorators and ReSharper 9.2 supports them:

TypeScript decorators support in ReSharper 9.2

ECMAScript6-style imports now have Code Completion for available items:

Import statement code completion in ReSharper 9.2

Navigation and Rename refactoring now work for ECMAScript6-style imports and exports too:

Import statement rename in ReSharper 9.2

Initial TypeScript 1.6 support

TypeScript 1.6 aligns even more with ECMAScript 6, and introduces support for generator functions and methods. ReSharper 9.2 supports them:
TypeScript 1.6 generators support in ReSharper 9.2

TypeScript 1.6 also introduces local types – types which can be declared within a lexical scope. This feature is now supported by ReSharper 9.2 as well:

TypeScript 1.6 local types support in ReSharper 9.2

Also, since 1.6, type aliases can be generic. This possibility is also handled by ReSharper 9.2:

Generic type aliases support

TypeScript 1.6 also introduces a new feature called type predicates. You can use a signature invocation as a type guard if the corresponding signature has a special type annotation with the “is” operator. This works structurally, so that in the “true” branch the guard accepts all types that have a subtyping relation to the provided type, and in the “false” branch the guard accepts only types that do not satisfy this criterion. ReSharper now handles this as well:

Type predicates support in ReSharper 9.2

You’ve waited for this a long time, and TypeScript 1.6 now has abstract classes, which are supported by ReSharper 9.2, too:

TypeScript abstract classes support in ReSharper 9.2

One more heavily requested feature has made its way into TypeScript 1.6, and ReSharper 9.2 now supports that, too. I’m talking about async functions and methods and the await operator:

TypeScript async await support

Note that TypeScript 1.6 language is still a work in progress, so new features may be added or something may change unexpectedly. That’s why our support for it in ReSharper 9.2 is still experimental. There are some known limitations:

  • Arbitrary expressions in “extends” clause and class expressions are not supported for TypeScript yet (but they are supported on the ECMAScript 6 side)
  • JSX syntax is currently not supported
  • Intersection types are currently not supported

New features for TypeScript

ReSharper 9.2 provides two new navigation features for TypeScript: Import completion and Go to type of symbol.

Import completion now provides you with a list of all items that are available for import:
Import completion for TypeScript in ReSharper 9.2

With Go to type of symbol, you can navigate from symbols to declarations of their types, when possible:

ReSharper 9.2: go to type of symbol

Regular expressions in JavaScript and TypeScript

ReSharper 9.2 introduces initial support for regular expressions in JavaScript and TypeScript. Now it covers regular expression literals, and provides syntax highlighting and code completion on them:

Support for regular expressions in JavaScript

Regular expression modifiers are completed as well:

Please note that regular expression editor/validation functionality for JavaScript is not available yet. We’ll extend our support for regular expressions in JavaScript in future versions of ReSharper. Stay tuned.

Enhancements to existing features

There is always room for improvement in our existing features as well. ReSharper 9.2 significantly enhances recursive type handling in TypeScript; makes code analysis in JavaScript behave better with new language constructs; provides more formatting rules for new ECMAScript 6 language constructs; and improves the performance of refactorings in TypeScript.

In ReSharper 9.2, we’ve also extended string literal highlighting to template strings, so that now escape sequences are highlighted inside them as well:

string literal highlighting in ReSharper 9.2

Enjoy the new features, and please feel free to provide your feedback. Thanks!

This entry was posted in How-To's, ReSharper Tips&Tricks and tagged , , , , . Bookmark the permalink.

13 Responses to TypeScript and JavaScript in ReSharper 9.2

  1. Daniel says:

    It’s happening again… No more extensions after update…
    It’s the last time I’m updating.

    • Matt Ellis says:

      There are extensions available for 9.2 – are you after anything in particular, or do you just see a blank list?

  2. Abdu says:

    Contact your favorite extensions’ developers to update their extensions.

    • Daria Dovzhikova says:

      Hello,
      What extension are you missing in particular? Many of them are already available for 9.2.

      • Marco says:

        One that is particularly important is StyleCop. Version beta4 was working for 9.1.x as a prerelease extension, but has disappeared entirely for 9.2. Is this not a popular extension? I would have thought that it would be better-supported.

        • Jura Gorohovsky says:

          Unfortunately, StyleCop is one of the worst supported extensions in the entire ecosystem, despite being popular.

  3. Pingback: The Morning Brew - Chris Alcock » The Morning Brew #1933

  4. Pingback: Dew Drop – August 26, 2015 (#2077) | Morning Dew

  5. Pingback: WordPress Twenty-Sixteen, ReSharper 9.2 und Windows 10

  6. Paul Bagioli says:

    Two requests:

    1) Extract method capability in Typescript would be a god-send.

    2) There is a crash bug when copying/pasting typescript code of certain size.

    • Anton Lobov says:

      Thanks a lot for your feedback, Paul!

      1) Extract method is planned for the next release after 10.1.

      2) Crash bug should be fixed in ReSharper 10.0.2. If not, please submit your crash dump, I’ll take a look. Thank you.

  7. Pingback: What does this example code do? | news-rss feed form stackoverflow

    • Anton Lobov says:

      Thanks for your question, I’ll answer it here:

      var {t: temperature, h: humidity} = weather;
      We assume here that ‘weather’ is an object like {t: 25, h: 80}. What’s on the left side is an ES6 feature called “object-destructuring declaration”, and what it does it takes corresponding fields from right-hand-side expression and assigns them to corresponding variables. It’s not very obvious that here not ‘t’ and ‘h’ are declared variables (they are field names for pattern-matching), but ‘temperature’ and ‘humidity’ are actual declared variables.

      In our example, we have fields ‘t’ and ‘h’ from right-hand-side expression which are to be assigned to variables ‘temperature’ and ‘humidity’. So, after executing this statement, we’ll have two variables, ‘temperature’ with value 25, and ‘humidity’ with value 80.

      The other statement:
      return { temperature, humidity};
      is also an ES6 feature called “short-hand properties”. It’s just a short form of writing:
      return { temperature: temperature, humidity: humidity};

Leave a Reply

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