ReSharper Help

Refactorings for TypeScript

ReSharper provides the following refactorings for TypeScript:

To perform a refactoring

  1. Set your caret at a symbol, select a code fragment that you want to refactor, or select an item in a tool window.
  2. Do one of the following:
    • On the main menu, choose ReSharper | Refactor, and then select a desired refactoring.
    • In the editor, File Structure window, or other ReSharper window, right-click the item you want to transform, choose Refactor from the context menu, and then select the required refactoring.  
    • On the main menu, choose  ReSharper | Refactor | Refactor This, or press Ctrl+Shift+R to display the list of applicable refactorings, and select one of them. You can also choose Refactor This in the context menu of a selection.
    • If a refactoring could fix a code issue that ReSharper detects and highlights in the editor, the corresponding action indicator Coding_Assistance__Context_Actions__icon_refactor appears to the left of the code issue. You can click on this indicator or press Alt+Enter to check the suggested refactoring and apply if if necessary.
    • Use default keyboard shortcuts assigned to specific refactorings, or assign custom shortcuts to your favorite refactorings.
  3. If the selected refactoring requires user input, the refactoring wizard opens. Note that the wizard's dialog boxes are not modal, so you can edit the code while the wizard is open.
    To roll back refactoring actions, the wizard provides the option  To enable Undo, open all files with changes for editing. If you select this option, ReSharper opens all modified files in new editor tabs and enables you to roll the refactoring back. In this case, you will need to save the changes yourself. If this option is not selected, ReSharper saves modified files automatically, without opening them.
  4. If a refactoring operation would cause code conflicts (such as duplicate names, visibility conflicts, etc.), the wizard displays the list of conflicts on the last step, before you apply the refactoring. For some conflicts, the wizard can also suggest quick-fixes. For more information, see Resolving Conflicts in Refactorings.

Some refactorings are available immediately after you modify code in the editor. For more information, see Inplace Refactorings

Copy Type

The Copy Type refactoring allows you to create a copy of selected type, and to place it into a specified module.

Copy Type refactoring in TypeScript

Introduce Field

This refactoring allows you to create a new field based on a selected expression, initialize it with the expression or from the constructor, and replace occurrences of the expression in the current type with references to the newly introduced field.

Introduce Variable

This refactoring allows you to create a new local variable based on a selected expression, initialize it with the expression, and finally replace all occurrences of the expression in the method with references to the newly introduced variable.

Move to Another File

This refactoring helps you move the selected non-nested type from the current file to any existing file or to a new file. If you are moving to a new file, the new file is created automatically. If there are no more types in the current file, it can be removed. All necessary imports are moved with the type. All imports that are no longer necessary are removed from the original file.

Move to Folder

This refactoring helps you move one or several types or files to another project or folder anywhere in your solution. If necessary, the refactoring will create the new target folder for you. All imports that the moved type(s) require are fixed in the new location. All imports that are no longer necessary are removed from the original file(s).

Move Type to Another Module

This refactoring wraps a module declaration around the selected type.


One of the most time-consuming refactorings is supported for TypeScript. Modifying the name of a symbol can cause many problems, if you try to do it manually. When you invoke the Rename refactoring (also available with the dedicated F2 shortcut), all checks are done by ReSharper. Either all modification are performed smoothly, if no conflicts exist, or you get the list with conflicts that you can resolve manually to be sure that only necessary and appropriate changes will be made.

Rename refactoring in TypeScript

See Also

Last modified: 30 June 2015