TypeScript function inheritance

Question

I don't even know if this is possible in TypeScript, but I'm trying to inherit a function from a Class, like this:

import {Component, AfterViewInit, ElementRef} from 'angular2/core';

@Component({})
class Class1 {
  name: string;
  constructor(private el: ElementRef) {}

  private setName() {
    this.name = "test";
  }

  ngAfterViewInit() {
    this.setName();
  }
}

@Component({
  selector: 'test'
})
export class Class2 extends Class1 {
  ngAfterViewInit() {
    super.ngAfterViewInit();
    console.log(this.name);
  }
}

but I'm getting the following error in console when calling the setName() function:

EXCEPTION: TypeError: this.el is undefined

Why isn't this working?

The setName() function actually is: this.name = this.el.nativeElement.firstChild; — Danilo Azevedo
– Danilo Azevedo, Commented Mar 14, 2016 at 0:50

basarat · Accepted Answer · 2016-03-14 22:36:09Z

5

Constructors are not inherited.

They are. Following sample shows this:

class Parent {  
    constructor(foo:number){}
}
class Child extends Parent {    
}

const child1 = new Child(); // Error!
const child2 = new Child(123); // OKAY!

But this is angular

However they are not analyzed for dependency injection. This means that your child class constructor isn't called with the same parameters as expected by the parent (in your case `el). You need to specify all the DI elements on each child class. So by chance the correct code is the one from the accepted answer:

@Component({
  selector: 'test'
})
export class Class2 extends Class1 {
  constructor(el: ElementRef) {
    super(el);
  }
}

answered Mar 14, 2016 at 22:36

basarat

278k60 gold badges475 silver badges528 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Günter Zöchbauer · Accepted Answer · 2016-03-14 05:55:32Z

2

Constructors are not inherited. You need to define them in each subclass

@Component({
  selector: 'test'
})
export class Class2 extends Class1 {
  constructor(el: ElementRef) {
    super(el);
  }

  ngAfterViewInit() {
    super.ngAfterViewInit();
    console.log(this.name);
  }
}

answered Mar 14, 2016 at 5:55

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Comments

bcherny · Accepted Answer · 2016-03-14 02:12:04Z

0

Consider updating el's scope to protected, meaning it can be accessed by both the class where it's declared and any derived classes.

// before
constructor(private el: ElementRef) {}

// after
constructor(protected el: ElementRef) {}

answered Mar 14, 2016 at 2:12

bcherny

3,1722 gold badges29 silver badges36 bronze badges

Collectives™ on Stack Overflow

TypeScript function inheritance

3 Answers 3

But this is angular

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

But this is angular

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related