Customizing private methods in TypeScript

Question

Customizing private methods in TypeScript

In this specific scenario, when the public method message() is included and the greet() function operates as anticipated:

class Foo {
    public greet() {
        console.log(`Hello, ${this.getMessage()}`);
    }
    getMessage(): string {
        return "I am Foo";
    }
}

class Goo extends Foo {
    getMessage(): string {
        return "I am Goo";
    }
}

However, changing getMessage() to private causes issues with the compilation of class Goo:

class Foo {
    public greet() {
        console.log(`Hello, ${this.getMessage()}`);
    }
    private getMessage(): string {
        return "I am Foo";
    }
}

class Goo extends Foo {
    private getMessage(): string {
        return "I am Goo";
    }
}

Many developers use private methods to enhance code readability by breaking down complex functions into smaller, more manageable pieces. This practice is recommended in various programming resources. However, TypeScript poses a challenge when modifications are required for subclasses that depend on these private methods.

Is there an alternative approach to address this issue without duplicating public methods in extended classes or exposing internal methods through public interfaces?

Furthermore, it raises curiosity regarding the TypeScript team's rationale behind the restriction that allows overriding of public methods but not private methods.

typescript

Answer 1

Answer №1

According to bryan60, you should utilize the protected modifier:

class Foo {
  public greet() {
    console.log(`Hello, ${this.getMessage()}`);
  }

  protected getMessage(): string {
    return "I am Foo";
  }
}

class Goo extends Foo {
  protected getMessage(): string {
    return "I am Goo";
  }
}

const goo = new Goo();
goo.greet(); // Hello, I am Goo

Referencing the handbook:

The protected modifier functions similarly to the private modifier, with the added ability for members declared protected to be accessed within deriving classes.

For instance:

// Property 'getMessage' is protected and only accessible within class 'Goo'
// and its subclasses.
goo.getMessage();

class Hoo extends Goo {
  public getMessage(): string {
    return "I am Hoo";
  }

  public tryToGetGoosMessage(goo: Goo): string {
    // Property 'getMessage' is protected and can only be accessed through an
    // instance of class 'Hoo'.
    return goo.getMessage();
  }

  public doOtherHoosHoo(hoo: Hoo) {
    // This is permissible as it is inside Hoo
    hoo.hoo();
  }

  protected hoo() {}
}

const hoo = new Hoo();
// Accessing getMessage publicly in Hoo is allowed
hoo.getMessage();

// Class 'Joo' erroneously extends base class 'Hoo'.
//  Property 'getMessage' is protected in type 'Joo' but public in type 'Hoo'.
class Joo extends Hoo {
  protected getMessage(): string {
    return "I am Joo";
  }
}

Playground link

Answer 2

According to bryan60, you should utilize the protected modifier:

class Foo {
  public greet() {
    console.log(`Hello, ${this.getMessage()}`);
  }

  protected getMessage(): string {
    return "I am Foo";
  }
}

class Goo extends Foo {
  protected getMessage(): string {
    return "I am Goo";
  }
}

const goo = new Goo();
goo.greet(); // Hello, I am Goo

Referencing the handbook:

The protected modifier functions similarly to the private modifier, with the added ability for members declared protected to be accessed within deriving classes.

For instance:

// Property 'getMessage' is protected and only accessible within class 'Goo'
// and its subclasses.
goo.getMessage();

class Hoo extends Goo {
  public getMessage(): string {
    return "I am Hoo";
  }

  public tryToGetGoosMessage(goo: Goo): string {
    // Property 'getMessage' is protected and can only be accessed through an
    // instance of class 'Hoo'.
    return goo.getMessage();
  }

  public doOtherHoosHoo(hoo: Hoo) {
    // This is permissible as it is inside Hoo
    hoo.hoo();
  }

  protected hoo() {}
}

const hoo = new Hoo();
// Accessing getMessage publicly in Hoo is allowed
hoo.getMessage();

// Class 'Joo' erroneously extends base class 'Hoo'.
//  Property 'getMessage' is protected in type 'Joo' but public in type 'Hoo'.
class Joo extends Hoo {
  protected getMessage(): string {
    return "I am Joo";
  }
}

Playground link

Answer 3

Answer №2

Utilizing the protected keyword provides the appropriate solution for this scenario!

However, in cases where direct access to the parent class is not possible (for example, when it is encapsulated within a library), one alternative approach could involve overriding a private class member-function within the constructor.

It is important to note that this method is considered somewhat unethical and should be avoided if possible!

class Foo {
    public greet() {
        console.log(`Hello, ${this.getMessage()}`);
    }
    private getMessage(): string {
        return "I am Foo"
    }
}

class Goo extends Foo {
    constructor() {
        // redefining the private member function "getMessage" 🙀
        (this as any).getMessage = () => {
            return "I am Goo"; 
        };
    }
}

Answer 4

Utilizing the protected keyword provides the appropriate solution for this scenario!

However, in cases where direct access to the parent class is not possible (for example, when it is encapsulated within a library), one alternative approach could involve overriding a private class member-function within the constructor.

It is important to note that this method is considered somewhat unethical and should be avoided if possible!

class Foo {
    public greet() {
        console.log(`Hello, ${this.getMessage()}`);
    }
    private getMessage(): string {
        return "I am Foo"
    }
}

class Goo extends Foo {
    constructor() {
        // redefining the private member function "getMessage" 🙀
        (this as any).getMessage = () => {
            return "I am Goo"; 
        };
    }
}

Answer 5

Answer №3

When faced with the need to override a private method without access to the parent class, there is a more type-safe and less unconventional approach than the one suggested in mojoaxel’s answer. This alternative involves using bracket notation to access the private method:

class Foo {
    public greet() {
        console.log(`Hello, ${this.getMessage()}`);
    }

    private getMessage(): string {
        return "I am Foo";
    }
}

class Goo extends Foo {
    constructor() {
        super();
        this["getMessage"] = () => {
//          ^^^^^^^^^^^^^^ this accesses the private method
            return "I am Goo"; 
        };
    }
}

If you are utilizing ESLint and have the dot-notation rule enabled, it may be beneficial to set:

"@typescript-eslint/dot-notation": ["error", {"allowPrivateClassPropertyAccess": true}]

Answer 6

When faced with the need to override a private method without access to the parent class, there is a more type-safe and less unconventional approach than the one suggested in mojoaxel’s answer. This alternative involves using bracket notation to access the private method:

class Foo {
    public greet() {
        console.log(`Hello, ${this.getMessage()}`);
    }

    private getMessage(): string {
        return "I am Foo";
    }
}

class Goo extends Foo {
    constructor() {
        super();
        this["getMessage"] = () => {
//          ^^^^^^^^^^^^^^ this accesses the private method
            return "I am Goo"; 
        };
    }
}

If you are utilizing ESLint and have the dot-notation rule enabled, it may be beneficial to set:

"@typescript-eslint/dot-notation": ["error", {"allowPrivateClassPropertyAccess": true}]

Customizing private methods in TypeScript

Answer №1

Answer №2

Answer №3

Similar questions

An easy guide on utilizing ngSwitch for datatype selection in Angular

Issue reported: "Usage of variable 'someVar' before assignment" ; however, it is being properly assigned before usage

Update the input value with the selected option from the dropdown menu in Angular

The TypeScript error arises when an element implicitly contains an 'any' type due to the inability to use an expression of type 'any' to index a specific type

Upgrade to Typescript version 3.2 and exploring the Response body within lib.dom.d.ts

Error Message: Angular NullInjectorException - The provider for "[Object]" is not found

What is the best way to create an array of strings that can include multiple elements from a set of strings?

Ensure that only numbers with a maximum of two decimal places are accepted in Angular 2 for input

Transforming Excel data into JSON format using ReactJS

How can I run a TypeScript function within a JavaScript file?

What is the process of compiling TypeScript code?

What steps can be taken to stop Internet Explorer from caching Ajax requests in Angular2 using TypeScript?

Encountering unexpected errors with Typescript while trying to implement a simple @click event in Nuxt 3 projects

Find out whether the page was reloaded or accessed directly through a hyperlink

Facing issue with local redis session not functioning as intended

Troubleshooting problems with permissions when using the AWS IAM assumeRole function with session

There are no matching overloads in React for this call

What is the best way to format a string into a specific pattern within an Angular application

One method of extracting an object from an array using a parameter function is by utilizing the following approach

Navigate through each file or image within a directory using Angular