Method overriding in Angular2

Question

I have two components, one is parent and the other is child. Child extends from Parent. Parent has a method open(). Child overloads open() by rewriting and adding a parameter. It results in an error: open() is a property, and the property types do not match across classes.

open() => void

is not equal to

open(message: string) => void

Parent :

export class ParentClass {
    constructor() { super(); }

    open(){
        return "Hello World!";
    }
}

Child:

export class ChildClass extends ParentClass {
    constructor() { super(); }

    open(message: string){
        return message;
    }
}

score 3 · Accepted Answer · edited May 23 '17 at 12:26

The reason why this code doesn't work is simple:

let parent: ParentClass = new ParentClass();
parent.open();
parent = new ChildClass();
// what happens now?
parent.open();

After the third line of code, parent is still a type of ParentClass, so open call should be valid. On the other hand, it contains a ChildClass, so we aren't providing neccessary parameter for this method: message: string. It's a paradox.

If you want this code to be valid, both methods should share the same parameters.

Two tips for you:

Avoid inheritance. Seriously, most likely you don't need it and most likely it will only lead to problems, even if it doesn't seem like at first. Try: composition over inheritance.
If you still want to follow this way, try this answer.

score 0 · Answer 2 · edited May 23 '17 at 12:18

I think that you need the same signature for the method in the subclass:

export class ParentClass {
  constructor() { 
  }

  open(message:string){ // <-----
    return "Hello World!";
  }
}

export class ChildClass extends ParentClass {
  constructor() { super(); }

  open(message: string){
    return message;
  }
}

Or make the parameter optional in the sub class:

export class ParentClass {
  constructor() { 
  }

  open(message:string){
    return "Hello World!";
  }
}

export class ChildClass extends ParentClass {
  constructor() { super(); }

  open(message?: string){ // <-----
    return message;
  }
}

See this question:

Typescript child class function overloading

Method overriding in Angular2

2 Answers2