为什么Typescript首先运行抽象类？

Question

I'm getting a hard time trying to solve my abstract class issue with Typescript. First of all, let me know what I'm trying to achieve.

I have a class called Sword which extends Weapon . Each Weapon has to have some properties such as damage , but since each item has a different damage type (eg Sword may do 1 damage, a bow may do 2 damage) I have to define specific properties in the Sword class. My script looks like this:

abstract class Weapon
{
    protected abstract damage: number;
    constructor() {
        alert(this.damage);
    }

    showDamage() {
        alert(this.damage);
    }
}

class Sword extends Weapon implements WeaponInterface {
    protected damage: number = 999;

    constructor() {
        super();
    }
}

const sword = new Sword;
sword.showDamage();

Running the script above at http://www.typescriptlang.org/play/ , I get two messages:

undefined
999

I'm not exactly sure why Weapon.constructor runs first, because as long as Weapon.constructor runs first, there is literally no point in declaring an abstract value. For example, I have to do something like super(this.damage) in order to pass it into Weapon class. I won't need the protected abstract damage if I do so.

If I cannot even create a very basic inheritence with Typescript , why does it even support abstract classes at all? I'll have to do new Weapon(new Sword) which means I cannot typehint SwordInterface on other classes like Inventory .

class Inventory
{
    // Let's assume we have a "Shield" equipped so we can only equip "Sword" type
    addSword(sword: SwordInterface): void {

    }
}

I'm not very experienced with compiled languages and Typescript. Could anybody tell me what would be the proper way to achieve this? Passing class properties into super() call sounds lame...

I don't want to break my inheritence and interfaces either.

Answer 1

Typescript does not treat property initialization in the class body in any special way - it's done as part of that class constructor. It's possible to imagine a language that will apply this assignment

class Sword extends Weapon implements WeaponInterface {
    protected damage: number = 999;

very early, before any constructor is run. Typescript does not do that probably because it's not the simplest and most consistent thing to do.

So you have to do it yourself. One way to achieve what you want is to split code in your constructors into two parts, one that initializes the variables, and the other one that does the rest. Then you can manage yourself when each part is called. This technique is sometimes called two-phase initialization :

abstract class Weapon
{
    protected abstract damage: number;

    // NOTE: abstract properties must be initialized by subclasses
    //     in initialize() because they are used here in Weapon class constructor
    protected initialize(): void { }

    constructor() {
        this.initialize();
        alert(this.damage);
    }

    showDamage() {
        alert(this.damage);
    }
}

class Sword extends Weapon  {
    protected damage: number;

    protected initialize(): void {
        super.initialize();
        this.damage = 999;
    }

    constructor() {
        super();
    }
}

const sword = new Sword;
sword.showDamage(); // shows 999 twice

Answer 2

Of course base class constructors run first. What would the alternative be?

class Base {
  damage = 12;
}

class Derived extends Base {
  constructor() {
    // This should print 'undefined' ?
    console.log(this.damage);
  }
}

Answer 3

The base c'tor is run before the assignment of damage . Take a look at the generated constructor of Sword :

function Sword() {
    var _this = _super.call(this) || this;
    _this.damage = 999;
    return _this;
}

As an alternative you could pass the damage as base c'tor parameter:

abstract class Weapon {

    protected damage: number;

    constructor(damage: number) {
        this.damage = damage;
        alert(this.damage);
    }

    showDamage() { /*...*/ }
}

class Sword extends Weapon  {

    constructor() {
        super(999);
    }
}

Or shorter:

abstract class Weapon {
    constructor(protected damage: number) {
        alert(this.damage);
    }

    showDamage() { /* ... */ }
}