Wrong this.propertyName reference inside abstract method realization

[sanex3339]

TypeScript Version:

1.8.9 / nightly
Code

abstract class Abstract {
  protected name: string;

  constructor () {
    this.abstractMethod();
  }

  protected abstract abstractMethod (): void;
}

class Concrete extends Abstract {
  protected name: string = 'Concrete';

  protected abstractMethod () {
    console.log(this, this.name); // Concrete, undefined
  }
}

new Concrete();

Playground: link

Expected behavior:
this.name inside abstractMethod() realization must be pointed at name property of Concrete class.

Actual behavior:
this.name inside abstractMethod() realization is pointed at name property of Abstract class.

[jeffreymorlan]

The property = value syntax is shorthand for setting the property after the (possibly implicit) super() call. If you write Concrete's constructor out the long way, the problem is more apparent:

class Concrete extends Abstract {
  protected name: string;
  constructor() {
    super(); // Indirectly calls abstractMethod(). this.name is not set yet
    this.name = 'Concrete'; // Too late
  }
  protected abstractMethod() {
    console.log(this, this.name); // Concrete, undefined
  }
}

You might think that property = value should instead set the property before super(), like it does in C#. But this would be impossible for TypeScript because it must support targeting ES6 classes, in which this doesn't exist until super() returns.

In general it is a bad idea to call overridable methods from a constructor, since subclasses have not had a chance to do their initialization yet.

[sandersn]

Thanks @jeffreymorlan, that's a great explanation.

[RyanCavanaugh]

See also the many Stack Overflow questions about why calling virtual (let alone abstract!) methods from constructors is a bad thing to do.

[sanex3339]

ok, tnx