TypeScript Support in ReSharper 8.1

We have just recently announced TypeScript support as part of ReSharper 8.1 EAP, and this blog post is intended to give you more details on this exciting development. Note that ReSharper 8.1 is only the first milestone in supporting TypeScript, and while we’re ready to show a first set of TypeScript features, there’s still quite a long journey ahead.

Typing Assistance and Code Completion

Just like all the other languages ReSharper supports, TypeScript support in ReSharper 8 includes the following:

  • Various forms of typing assistance such as automatic creation of closing quotes and terminal braces as well as overtype support.
  • Support for live templates, ReSharper’s powerful alternative to Visual Studio snippets providing enhanced functionality such as e.g. insert/replace behavior on tab/enter.
  • Support for code completion for both static and dynamically typed variables. TypeScript annotations are also used to enhance code completion in JavaScript files.
  • Ability to rearrange code (more on this in a later section).

Navigation

As with other languages, ReSharper provides various navigation options, such as Go to Everything as well as its various specializations, such as Go to Member:

ReSharper 8.1 TypeScript Go to Member Navigation

As you might expect, contextual navigation also works throughout TypeScript files – for any element, you can bring up the Navigate To menu and search for the source of the declaration or the location where this is used. When searching for usages of a property, for example, ReSharper is capable of locating both the so-called smart usages (where the type is intelligently inferred) as well as other usages with similar name. (Incidentally, this feature is available for both TypeScript and JavaScript.)

ReSharper 8.1 TypeScript Find Smart Usages

This is also available in element references to HTML and CSS related entities. For example, you can find usages of the .ui-tooltip-top class below, which will take you to the HTML page where that style is used:

ReSharper 8.1 TypeScript Navigate To Menu

Refactorings

Our initial TypeScript support comes with two refactorings. The first is the Introduce Variable refactoring that lets you create a variable for the selected part of code. This refactoring is also sensitive to the number of occurrences of the same value when introducing a variable:

ReSharper 8.1 TypeScript Introduce Variable Refactoring

The other refactoring is Rename refactoring, whose name should be self-explanatory. Naturally, this refactoring also looks at references to the old name in the string literals and offers a chance to fix usages there too:

ReSharper 8.1 TypeScript Rename Refactoring Usages in Comments and String Literals

The Rename refactoring for TypeScript is also capable of detecting structurally compatible members, and offers to perform a rename on them too, as shown below:

ReSharper 8.1 TypeScript Rename Refactoring Structurally Compatible Members

Rearrange Code

Just as with other languages ReSharper supports, TypeScript support includes the Rearrange Code feature that lets you quickly change the position of code blocks within the file. To use it, step on e.g., a function, a hold the Shift+Ctrl+Alt keys:

ReSharper 8.1 TypeScript Rearrange Code

Now, simply press the ↑Up or ↓Down keys to move the selected block in the file. This feature doesn’t just work for high-level constructs, but also for smaller ones (e.g., lambdas), where it’s possible not only to rearrange the position of the block but also use the ←Left and →Right keys to move the selected item in and out of different scopes. Also, this mechanic is available for rearranging arguments.

ReSharper 8.1 TypeScript Rearrange Code Block

And finally, TypeScript support also includes the support for the greedy brace: using the same shortcut key combination, you can essentially move the opening or closing brace of a code block to leave in/out any part of that block outside of scope:

ReSharper 8.1 TypeScript Greedy Brace

Code Inspections

In the tradition of supporting various languages, ReSharper performs continuous checking of TypeScript files for errors and inaccuracies. For example, ReSharper is able to detect unused parameters:

ReSharper 8.1 TypeScript Inspection Unused Parameter

It’s also able to detect invalid CSS references

ReSharper 8.1 TypeScript Inspection Invalid CSS Reference

…as well as perform general stylistic clean-up such as, e.g., finding and fixing missing semicolons — note the Fix in Scope mechanic that’s available here:

ReSharper 8.1 TypeScript Semicolon Quick Fix in Scope

Things to Come

At the moment, our TypeScript support is still a work in progress, and we’ve got a lot more to do: support for the type system (e.g., hierarchy navigation), generics and contextual typing are still in the works, and we’re working hard to bring them to you as soon as possible.

For the time being, check out ReSharper 8.1 EAP and let us know what you think!

This entry was posted in ReSharper Tips&Tricks and tagged , , , , . Bookmark the permalink.

2 Responses to TypeScript Support in ReSharper 8.1

  1. Hannes K says:

    Does Peek definition work out of the box, and if not, is it something you could add?

    Thanks for any answer,
    Hannes

  2. Omid Rad says:

    I was reviewing the issues that I had logged for the TypeScript project in last few months and I noticed few ones that were marked by the TS team as being out of the scope of the compiler and better suited for code analyzers to check them. So I’m adding them here for the Resharper team to pick up:

    Should not use lexical scoping rules on prototype extension methods
    https://typescript.codeplex.com/workitem/802

    Warn about undefined variable in the scope
    https://typescript.codeplex.com/workitem/1797

    Also please allow TypeScript to be disabled separately in Resharper options without having to suspend the whole R# plugin. Sometimes I want to use Visual Studio language services for TypeScript but don’t want to disable Resharper completely. Also can have option to “Disable TypeScript until next Visual Studio restart.”

    Thanks

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">