Subclass method overloading in Typescript

Question

Subclass method overloading in Typescript

Take a look at this example:

class A {
  method(): void {}
}

class B extends A {
  method(a: number, b: string): void {}
}

An error occurs when trying to implement method() in class B.

My goal is to achieve the following functionality:

var b: B;
b.method(0, '');     // method overloaded by B
b.method();          // method inherited from A

Can this be accomplished with Typescript?

UPDATE: I have corrected the code - previously used function properties instead of methods.

typescript

Answer 1

Answer №1

When utilizing arrow functions, you are actually working with function type/value members rather than traditional class methods.
Unlike regular methods that are added to the prototype, arrow functions are attached directly to the instance in the constructor:

class MyClass {
    method() {}
    funct = () => {}
}

After compilation:

var MyClass = (function () {
    function MyClass() {
        this.func = function () { };
    }
    MyClass.prototype.method = function () { };
    return MyClass;
}());

This approach is suitable if it aligns with your requirements.
However, one drawback is that performing overloading and invoking the parent method becomes more complex.

In the scenario of overloading:

class A {
    func(): void {}
}

class B extends A {
    func(): void; // parent signature
    func(a: number, b: string): void; // new signature
    func(): void {
        if (arguments.length === 0) {
            super.func();
        } else {
            // implement specific functionality here
        }
    }
}

Answer 2

When utilizing arrow functions, you are actually working with function type/value members rather than traditional class methods.
Unlike regular methods that are added to the prototype, arrow functions are attached directly to the instance in the constructor:

class MyClass {
    method() {}
    funct = () => {}
}

After compilation:

var MyClass = (function () {
    function MyClass() {
        this.func = function () { };
    }
    MyClass.prototype.method = function () { };
    return MyClass;
}());

This approach is suitable if it aligns with your requirements.
However, one drawback is that performing overloading and invoking the parent method becomes more complex.

In the scenario of overloading:

class A {
    func(): void {}
}

class B extends A {
    func(): void; // parent signature
    func(a: number, b: string): void; // new signature
    func(): void {
        if (arguments.length === 0) {
            super.func();
        } else {
            // implement specific functionality here
        }
    }
}

Answer 3

Answer №2

Because TypeScript is compiled into JavaScript.

JavaScript lacks the ability to determine the number and types of parameters passed to a function in order to automatically select which function to call. Therefore, you may need to use different function names or check the actual parameter types during runtime:

class B extends A {
  func() => void;
  func(a: number, b: string) => void;
  func(a: any, b: any) {
    if (a == undefined) {
      super.func()
    } else if (typeof(a) == "number" && typeof(b) == "String") {
      /// implement func(a: b) here
    }
  }

}

Answer 4

Because TypeScript is compiled into JavaScript.

JavaScript lacks the ability to determine the number and types of parameters passed to a function in order to automatically select which function to call. Therefore, you may need to use different function names or check the actual parameter types during runtime:

class B extends A {
  func() => void;
  func(a: number, b: string) => void;
  func(a: any, b: any) {
    if (a == undefined) {
      super.func()
    } else if (typeof(a) == "number" && typeof(b) == "String") {
      /// implement func(a: b) here
    }
  }

}

Answer 5

Answer №3

If you want to access your base class's overload signatures, you will need to manually specify them in your derived class like this:

class Base {
  method: () => void;
}

class Derived extends Base {
  method: {
      (): void;
      (param1: number, param2: string): void;
  }
}

It is important to remember that you are responsible for implementing the different versions of method in the derived class as needed.

Answer 6

If you want to access your base class's overload signatures, you will need to manually specify them in your derived class like this:

class Base {
  method: () => void;
}

class Derived extends Base {
  method: {
      (): void;
      (param1: number, param2: string): void;
  }
}

It is important to remember that you are responsible for implementing the different versions of method in the derived class as needed.

Answer 7

Answer №4

When working with TypeScript classes, the documentation suggests that in an overridden or overloaded method, you should include a "?" after the parameter name and use the override keyword before the method name to avoid compilation errors:

class A {
  func(): void {}
}

class B extends A {
  override func(a?: number, b?: string): void {}
}

Answer 8

When working with TypeScript classes, the documentation suggests that in an overridden or overloaded method, you should include a "?" after the parameter name and use the override keyword before the method name to avoid compilation errors:

class A {
  func(): void {}
}

class B extends A {
  override func(a?: number, b?: string): void {}
}

Subclass method overloading in Typescript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Steps for utilizing field labels to transmit values in Protractor

Establish a connection between MongoDB and the built-in API in Next.js

Prevent the Vue page from loading until the data has been fetched successfully

The type '{}' cannot be assigned to the type '{ title: string; text: string; }'

Is there a way to transform an angular 2 app.module into ES6 format?

The count of bits is not producing the anticipated result

Is including takeUntil in every pipe really necessary?

Exploring the contrasts and practical applications of Virtual Scroll versus Infinite Scroll within the framework of Ionic 3

Utilizing TypeScript in Kendo UI for JQuery

Tips for inserting a component into a div selector using Angular 2

Leveraging the Recyclability Aspect of a ReactJS Modal

Having trouble with VS Code on my Linux system - npm error popping up?

Utilizing Angular to Handle Undefined Variables in String Interpolation

Mastering Angular 7: A guide to efficiently binding values to radio buttons

Having trouble establishing a connection with Db2 while using protractor

What is the method for launching a standalone terminal window from a vscode extension?

How can I display table rows along with their child table rows in Angular?

Implementing computed properties: A guide to incorporating type setting

Extracting and transforming an array into a list with the desired outcome

Tips for implementing a cascading dropdown feature in Angular 7 Reactive Formarray: Ensuring saved data loads correctly in the UI form