Refactorings for TypeScript

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

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.

You can also invoke this refactoring with the dedicated shortcut Ctrl0R,0F.

In the example below, we use this refactoring to replace two occurrences of the same string with a new constant field:

class ErrorHandler {
 
    alertError() {
        alert("Something has failed...");
    }
 
    logError() {
        if (typeof window.console != 'undefined') {
            console.log("Something has failed...");
        }
    }
}

class ErrorHandler {
    private static errorMessage= "Something has failed...";
 
    alertError() {
        alert(ErrorHandler.errorMessage);
    }
 
    logError() {
        if (typeof window.console != 'undefined') {
            console.log(ErrorHandler.errorMessage);
        }
    }
}

This refactoring helps you create a type alias for a type combination and replace the currently selected combination or all similar combinations in the current scope with the alias.

To invoke this refactoring, select a type intersection or union, a literal, or other entity that can be aliased and press CtrlShift0R or choose ReSharper | Refactor | Refactor This… from the main menu, and then select Introduce type alias in the Refactor This popup. If there are multiple occurrences of the selected entity in the current context, you will be able to choose whether to replace the current entity or all entities.

This refactoring helps you remove the selected type alias and replace all its usages with its definition.

To invoke this refactoring, select a declaration or usage of a type alias, and press CtrlShift0R or choose ReSharper | Refactor | Refactor This… from the main menu, and then select Inline type alias in the Refactor This popup.

This refactoring allows you to create a new local variable or constant 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.

You can also invoke this refactoring with the dedicated shortcut Ctrl0R,0V.

In the example below, we use this refactoring to replace two occurrences of the same string with a variable:

function logError() {
    alert("Something has failed...");
    if (typeof window.console != 'undefined') {
        console.log("Something has failed...");
    }
}

function logError() {
    var message = "Something has failed...";
    alert(message);
    if (typeof window.console != 'undefined') {
        console.log(message);
    }
}

This refactoring helps you quickly move a part of a string to a separate variable.

If TypeScript 1.4 or later is selected as a language level on the Code Editing | TypeScript | Inspections page of ReSharper options, the refactoring will add a new template argument for the extracted substring. If the language level is TypeScript 1.3 or lower, then string concatenation is used:

var helloWorld = "Hello, World";

let world = "World";
var helloWorld = `Hello, ${world}`;

var world = "World";
var helloWorld = "Hello, " + world;

This refactoring allows you to replace all occurrences of a variable in the code with its initializer. Note that the refactoring should be only applied if the variable value stays unchanged after initialization.

You can also invoke this refactoring with the dedicated shortcut Ctrl0R,0I.

In the example below, we use this refactoring to inline the reversed variable.

function reverseString(input) {
    var reversed = input.split("").reverse().join("");
    return reversed;
}

function reverseString(input) {
    return input.split("").reverse().join("");
}

This refactoring helps you move the selected 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.

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

In TypeScript projects created from Visual Studio templates (for example, Apache Cordova), ReSharper allows moving string literals to resource files. ReSharper can optionally find all identical strings in the desired scope and replace them with the resource usage. To perform this refactoring, you need to have at least one resource file in your project (it normally has the .resjson extension).

You can also invoke this refactoring with the dedicated shortcut Ctrl0R,0O.

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 Ctrl0R,0R shortcut), all checks are done by ReSharper. Either all modification are performed smoothly if no conflicts exist, or you get the list of conflicts that you can resolve manually to be sure that only necessary and appropriate changes are made.