TypeScript Support in ReSharper 8.1

Dmitri Nesteruk

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:

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.)

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:

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:

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:

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:

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:

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.

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:

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:

It’s also able to detect invalid CSS references…

…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:

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!

Subscribe to a monthly digest curated from the .NET Tools blog:

Subscribe form

By submitting this form, I agree to the JetBrains Privacy Policy Notification icon

By submitting this form, I agree that JetBrains s.r.o. ("JetBrains") may use my name, email address, and location data to send me newsletters, including commercial communications, and to process my personal data for this purpose. I agree that JetBrains may process said data using third-party services for this purpose in accordance with the JetBrains Privacy Policy. I understand that I can revoke this consent at any time in my profile. In addition, an unsubscribe link is included in each email.

Submit

Thanks, we've got you!