Create attributes that share the identical name as certain properties of the parent class

Question

Create attributes that share the identical name as certain properties of the parent class

Upon extending a module, I have encountered an issue related to declaring private properties. Specifically, when I attempt to declare a method like init() as private, an error message is generated:

Types have separate declarations of a private property 'init'

It seems that the problem arises from having the same method in the superclass. However, I find it inconvenient to have to use different names just because the method is already taken in a class that is inaccessible to me due to its private nature!

My intention in declaring the method as private was to prevent such conflicts. I don't want to override it, but I also don't see why this should restrict me from declaring it in other classes. What purpose does this restriction serve anyway?

typescript

Answer 1

Answer №1

In my opinion, the reason behind this behavior lies in the prototype-based nature of javascript.
Let's take a look at the following code snippet:

class A {
    public constructor() {
        this.method();
    }

    private method() {
        console.log("A");
    }
}

class B extends A {
    private method() {
        console.log("B");
    }
}

new B();

One would expect the console to display "A" since we are calling a private method within the constructor of class A, which should not be overridable by a subclass. However, the compiled code actually results in:

var A = (function () {
    function A() {
        this.method();
    }
    A.prototype.method = function () {
        console.log("A");
    };
    return A;
}());
var B = (function (_super) {
    __extends(B, _super);
    function B() {
        _super.apply(this, arguments);
    }
    B.prototype.method = function () {
        console.log("B");
    };
    return B;
}(A));

Upon execution, the console will show "B" instead of "A" due to the method in the prototype of B overriding the original function. This behavior resembles that of a protected method rather than a private one.

In light of this, there are three possible solutions:

Use distinct names for private methods in each class
Switch from private to protected methods, maintaining the same functionality while indicating the nature of the method in the code
Introduce a base class for common public/protected methods and define private methods in the subclasses

Answer 2

In my opinion, the reason behind this behavior lies in the prototype-based nature of javascript.
Let's take a look at the following code snippet:

class A {
    public constructor() {
        this.method();
    }

    private method() {
        console.log("A");
    }
}

class B extends A {
    private method() {
        console.log("B");
    }
}

new B();

One would expect the console to display "A" since we are calling a private method within the constructor of class A, which should not be overridable by a subclass. However, the compiled code actually results in:

var A = (function () {
    function A() {
        this.method();
    }
    A.prototype.method = function () {
        console.log("A");
    };
    return A;
}());
var B = (function (_super) {
    __extends(B, _super);
    function B() {
        _super.apply(this, arguments);
    }
    B.prototype.method = function () {
        console.log("B");
    };
    return B;
}(A));

Upon execution, the console will show "B" instead of "A" due to the method in the prototype of B overriding the original function. This behavior resembles that of a protected method rather than a private one.

In light of this, there are three possible solutions:

Use distinct names for private methods in each class
Switch from private to protected methods, maintaining the same functionality while indicating the nature of the method in the code
Introduce a base class for common public/protected methods and define private methods in the subclasses

Create attributes that share the identical name as certain properties of the parent class

Answer №1

Similar questions

Using Angular to make an HTTP POST request to fetch data

Unable to inject NgControl into validator directive in Angular 6

Retrieve input value in Angular 8 using only the element's ID

React: Unable to locate an index signature with a parameter of type 'string' on type N

Attempting to redeclare a previously exported variable will result in an error stating: "Cannot

Is there a way to alter the date format for input elements within formGroups using Angular 7?

Searching for a specific document using AngularFirestore - what's the best method?

Angular Build Showing Error with Visual Studio Code 'experimentalDecorators' Configuration

The TS2583 error in TypeScript occurs when it cannot locate the name 'Set' within the code

Adjust the background color of a list item using Typescript

Struggling with getting render props to work in Next.js version 13

Ion-List seamlessly integrates with both ion-tabs and ion-nav components, creating a cohesive and dynamic user interface

Revamp the button's visual presentation when it is in an active state

Express not functioning properly with custom error handler

What is the method for obtaining the dynamic key of an object?

Error in AngularX TS: Trying to invoke a type that does not have a callable signature

The conditional type in TypeScript is malfunctioning

Ways to categorize by a particular date

How to import a module from the root path using TypeScript in IntelliJ IDEA

What is the best way to eliminate a particular element from an array produced using the .map() function in