Refactoring TypeScript

Last modified: 12 April 2022

Professional feature: download PyCharm Professional to try.

Required plugin: JavaScript and TypeScript

The plugin is bundled with PyCharm and enabled by default.

Pull Class Members Up refactoring

Suppose you have a class AccountingDepartment that extends an abstract class Department and implements an interface ReportingDepartment.

abstract class Department {
    constructor(public name: string) {
    }
    printName(): void {
        console.log("Department name: " + this.name);
    }
}

interface ReportingDepartment {
    generateReports(): void
}

class AccountingDepartment extends Department implements ReportingDepartment {
    constructor() {
        super("Accounting and Auditing");
    }
    printMeeting(): void {
        console.log("The Accounting Department meets each Monday at 10 a.m");
    }
    generateReports(): void {
        console.log("Generating accounting reports...");
    }
}

In this example, the PrintMeeting() method is moved from AccountingDepartment to Department.

abstract class Department {
    constructor(public name: string) {
    }
    printName(): void {
        console.log("Department name: " + this.name);
    }
    printMeeting(): void {
        console.log("The Accounting Department meets each Monday at 10 a.m");
    }
}

interface ReportingDepartment {
    generateReports(): void
}

class AccountingDepartment extends Department implements ReportingDepartment {
    constructor() {
        super("Accounting and Auditing");
    }
    generateReports(): void {
        console.log("Generating accounting reports...");
    }
}

In this example, the PrintMeeting() method is copied from the AccountingDepartment class to the ReportingDepartment interface.

abstract class Department {
    constructor(public name: string) {
    }
    printName(): void {
        console.log("Department name: " + this.name);
    }
}

interface ReportingDepartment {
    generateReports(): void
    printMeeting(): void
}
class AccountingDepartment extends Department implements ReportingDepartment {
    constructor() {
        super("Accounting and Auditing");
    }
    printMeeting(): void {
        console.log("The Accounting Department meets each Monday at 10 a.m");
    }
    generateReports(): void {
        console.log("Generating accounting reports...");
    }
}

Rename refactorings

In the editor, select the class, method, variable, or field to rename and press Shift+F6 or choose Refactor | Rename from the context menu or from the main menu.
In the field with canvas, specify the new name of the symbol. Type the name or select an appropriate one from the list.
Optionally:
Click next to the highlighted symbol to open the Also rename in popup and select the Search in comments and strings and Search for text occurrences checkboxes to rename the usages of the symbol in comments, string literals, and text.
tip
The Also rename in popup and are not available when you are renaming a parameter. To specify additional options, open the Rename dialog Shift+F6 once more.
Optionally:
To open the Rename dialog with more options, press Shift+F6 once again.
- Select the Search in comments and strings checkbox to rename the usages of the symbol in comments, documentation comments, and string literals.
- Select the Search for text occurrences checkbox to rename the matched symbol in texts in HTML and other files included in the project.
- Select the Search in JavaScript files checkbox to rename the usages of the symbol in generated JavaScript code.
- Select the Search for dynamic references checkbox to rename the dynamic usages of the symbol.
  tip
  If you select the Search for dynamic references checkbox, the dialog will open by default until you clear it.
  Note that including dynamic usages in the refactoring may cause erroneous renaming as shown in the example below. Here target in console.log(e.target) can be changed to myTarget because e has the type any, which means it could also be myInt.
  Before renaming
  Dynamic usage renamed
  interface myInt { target: string } function onClick(e: any) { console.log(e.target); }
  interface myInt { myTarget: string } function onClick(e: any) { console.log(e.myTarget); }
To avoid erroneous renaming, preview the changes before applying them.
By default, in the Refactoring Preview tool window, all the dynamic usages of a symbol are marked as excluded and grouped under the Dynamic references in code to <symbol> node. To apply the refactoring to a usage, select Include from its context menu.

Extract/Introduce refactorings

Introduce Parameter

Suppose you have a piece of code with a hardcoded "Hello, " in the function greeter().

function greeter(firstName : String, lastName : String) {
    return "Hello, " + firstName + " " + lastName;
}

document.body.innerHTML = greeter("Jane","User");

With the Introduce Parameter refactoring, you can replace this hardcoded with a parameter. The new parameter can be extracted as or as .

A new parameter greeting is extracted as an optional parameter. The new parameter is added to the definition of greeter() using the function default parameter syntax. The call of greeter() is not changed.

function greeter(firstName : String, lastName : String, greeting = "Hello, ") {
    return greeting + firstName + " " + lastName;
}

document.body.innerHTML = greeter("Jane","User");

In this example, a new parameter greeting is extracted as a required parameter. So the corresponding function call (document.body.innerHTML = greeter(user); is changed accordingly.

function greeter(firstName : String, lastName : String, greeting: string) {
    return greeting + firstName + " " + lastName;
}

document.body.innerHTML = greeter("Jane", "User", "Hello, ");

Introduce Variable

function Multiplication(a : number, b : number) {
    let d = (a + b) * (a + b);
    return d;
}

var e = Multiplication(4, 6);

Introduce Constant

Suppose you have a fragment of code with hardcoded Department name:.

printName(): void {
    console.log("Department name: " + this.name);    }

With the Introduce Constant refactoring, you can replace the hardcoded Department name with a constant. The scope of the extracted constant depends on the context in which the new constant is declared (inside the enclosing method, as a field of the class, or outside any class).

printName(): void {
    console.log("Department name: " + this.name);
}

class AccountingDepartment extends Department implements ReportingDepartment {
    name: string;

    printName(): void {
        console.log("Department name: " + this.name);
    }
}

class AccountingDepartment extends Department implements ReportingDepartment {
    name: string;

    printName(): void {
        console.log("Department name: " + this.name);
    }
}

Introduce Field

class Rectangle {
    constructor(public height: number, public width: number) {
        this.height = height;
        this.width = width;
    }

    get area() {
        return this.calcArea();
    }

    calcArea() {
        return this.height * this.width;
    }
}

In all the three examples below, the same field, is introduced. The examples illustrate three different ways to initialize the introduced field.

class Rectangle {
    constructor(public height: number, public width: number) {
        this.height = height;
        this.width = width;
    }

    private _calcArea: number;

    get area() {
        this._calcArea = this.calcArea();
        return this._calcArea;
    }

    calcArea() {
        return this.height * this.width;
    }
}

class Rectangle {
    constructor(public height: number, public width: number) {
        this.height = height;
        this.width = width;
    }

    private _calcArea = this.calcArea();

    get area() {
        return this._calcArea;
    }

    calcArea() {
        return this.height * this.width;
    }
}

class Rectangle {
    constructor(public height: number, public width: number) {
        this._calcArea = this.calcArea();
        this.height = height;
        this.width = width;
    }

    private _calcArea: number;

    get area() {
        return this._calcArea;
    }

    calcArea() {
        return this.height * this.width;
    }
}

Extract Method

In this example, a globally scoped method NewMethod() is extracted from the let c = a + b; expression. The parameters for the extracted method are retrieved from the let c = a + b; expression.

function MyFunction(a : number, b : number) {
    let c = a + b;
    let d = c * c;
    return d;
}

function MyFunction(a : number, b : number) {
    let c = a + b;
    let d = c * c;
    return d;
}

In this example, a method NewMethod() is extracted from the let c = a + b; expression. The destination scope function MyFunction is chosen.

function MyFunction(a : number, b : number) {
    let c = a + b;
    let d = c * c;
    return d;
}

A method NewMethod() is extracted from the var e = MyFunction(4, 6); expression that is outside any method. The extracted method is globally scoped.

var e = MyFunction(4, 6);

Extract Type Alias

Suppose you have the following fragment of code with a { z: number } type declaration:

function returnsObj(): { x : number, y : {z : number} } {
    return null
}

function anotherObjectReturned(): {x : number, y : {z : number} } {
    return null
}

In the example below, a type alias is extracted from the type declaration:

type MyNewAlias = { z : number };

function returnsObj(): { x : number, y : MyNewAlias } {
    return null
}

function anotherObjectReturned(): { x : number, y : MyNewAlias } {
    return null
}

Extract Superclass

Suppose you have a class AccountingDepartment and you expect that the printName() method from it will be re-used.

class AccountingDepartment  {
    name: string;
    printName(): void {
        console.log("Department name: " + this.name);
    }
    printMeeting(): void {
        console.log("The Accounting Department meets each Monday at 10 a.m");
    }
    generateReports(): void {
        console.log("Generating accounting reports...");
    }
}

You can extract a superclass and include the and the field in it.

class Department {
    name: string;

    printName(): void {
        console.log("Department name: " + this.name);
    }
}

class AccountingDepartment extends Department {
    printMeeting(): void {
        console.log("The Accounting Department meets each Monday at 10 a.m");
    }
    generateReports(): void {
        console.log("Generating accounting reports...");
    }
}

Extract Interface

Suppose you have a class AccountingDepartment and you expect that the generateReports() method from it will have other implementations.

abstract class Department {
    constructor(public name: string) {
    }
    printName(): void {
        console.log("Department name: " + this.name);
    }
}

class AccountingDepartment extends Department {
    constructor() {
        super("Accounting and Auditing");
    }
    printMeeting(): void {
        console.log("The Accounting Department meets each Monday at 10 a.m");
    }
    generateReports(): void {
        console.log("Generating accounting reports...");
    }
}

You can extract a interface and include the in it.

abstract class Department {
    constructor(public name: string) {
    }
    printName(): void {
        console.log("Department name: " + this.name);
    }
}

interface DepartmentInterface {
    generateReports(): void;
}

class AccountingDepartment extends Department implements DepartmentInterface {
    constructor() {
        super("Accounting and Auditing");
    }
    printMeeting(): void {
        console.log("The Accounting Department meets each Monday at 10 a.m");
    }
    generateReports(): void {
        console.log("Generating accounting reports...");
    }
}

Inline refactorings

function Multiplication(a : number, b : number) {
    let c = a + b;
    let d = (c) * (c);
    return d;
}

In the example below, the body of Sum() is placed in the body of Multiplication().

function Sum(a: number, b: number) {
    return a + b;
}

function Multiplication(a: number, b: number) {
    let d = Sum(a, b) * Sum(a, b);
    return d;
}

var e = Multiplication(4, 6);

Change Signature refactoring

In the example below, the function eat() is renamed to feed() and a new boolean parameter isMammal is introduced.

class Animal {
    constructor(age: number, name: string){
    }

    eat(food: string[]): void {
    }
}

let Max = new Animal(23, 'Max');
Max.eat(['Apple', 'Parsley']);
let Daisy = new Animal(12, 'Daisy');
Daisy.eat(['Pork', 'Fish']);

Thanks for your feedback!

Was this page helpful?

Refactoring TypeScript

See also

Procedures

Refactoring TypeScript﻿

Move refactorings﻿

Move a class, a function, or a variable﻿

Pull Class Members Up refactoring﻿

Move the methods of a class to a superclass or an interface﻿

Rename refactorings﻿

tip

tip

tip

Keep the names of classes and containing files in compliance﻿

Keep the name of a file in compliance with the name of the corresponding class﻿

Extract/Introduce refactorings﻿

Introduce Parameter﻿

Introduce a parameter﻿

Choosing the refactoring mode﻿

Introduce Variable﻿

Introduce a variable﻿

Choosing the refactoring mode﻿

Introduce Constant﻿

Introduce a constant﻿

Introduce Field﻿

Introduce a field﻿

Choosing the refactoring mode﻿

Extract Method﻿

Extract a function﻿

tip

Open the Extract Function dialog by default﻿

Extract Type Alias﻿

Extract a type alias﻿

Extract Superclass﻿

Extract a superclass﻿

Extract Interface﻿

Extract an interface﻿

note

Introduce Object or Array Destructuring﻿

Replace the original assignment﻿

Keep the original assignments﻿

Generate destructuring parameters for a function﻿

Inline refactorings﻿

Run an Inline refactoring﻿

Change Signature refactoring﻿

Invoke Change Signature﻿

Rename a function﻿

Change the return type of a function﻿

Change the visibility of a function﻿

note

Manage the function parameters﻿

Propagate a parameter along the hierarchy of calls﻿

Preview the changes and complete the refactoring﻿

note

See also

Procedures

Refactoring TypeScript

Move refactorings

Move a class, a function, or a variable

Pull Class Members Up refactoring

Move the methods of a class to a superclass or an interface

Rename refactorings

Keep the names of classes and containing files in compliance

Keep the name of a file in compliance with the name of the corresponding class

Extract/Introduce refactorings

Introduce Parameter

Introduce a parameter

Choosing the refactoring mode

Introduce Variable

Introduce a variable

Choosing the refactoring mode

Introduce Constant

Introduce a constant

Introduce Field

Introduce a field

Choosing the refactoring mode

Extract Method

Extract a function

Open the Extract Function dialog by default

Extract Type Alias

Extract a type alias

Extract Superclass

Extract a superclass

Extract Interface

Extract an interface

Introduce Object or Array Destructuring

Replace the original assignment

Keep the original assignments

Generate destructuring parameters for a function

Inline refactorings

Run an Inline refactoring

Change Signature refactoring

Invoke Change Signature

Rename a function

Change the return type of a function

Change the visibility of a function

Manage the function parameters

Propagate a parameter along the hierarchy of calls

Preview the changes and complete the refactoring