Question

试图在jsfiddle中测试一个非常简单的抽象类实现，但是我没有得到任何打印结果。您看到这里有什么不正确的地方吗？

https://jsfiddle.net/learningjsfiddle/L5qy08ch/5/

console.log均未打印。

这是测试示例

console.log('setup');

interface Activatable {
    //ActivateSelf: () => void;
  ActivateSelf(): void;
}

//abstract keyword, abstract classes are allowed to implement interface
//cannot do new AbstractBase, need sub classes to do method implementation same as C#
abstract class AbstractBase implements Activatable {    
  constructor(public name: string){}

  //abstract method, this satisfies the req due to implementing interface
  abstract ActivateSelf(): void;
};

class ArmyBase extends AbstractBase {
    totalSoldiers: number;
  name: string

  constructor(name: string, totalSoldiers: number){
    //extending a class, need to call a super in the constructor
    //this does not change when extending an abstract class
    super(name);
    this.totalSoldiers = totalSoldiers;

    //abstract method
    public ActivateSelf(){
        //console.log(`ArmyBase [${this.name}] has been activated!`);
      console.log('ArmyBase ' + this.name + ' has been activated!'');
    }
  }

};

class NavyBase extends AbstractBase {
    totalShips: number;
  name: string

  constructor(name: string, totalShips: number){
    //extending a class, need to call a super in the constructor
    //this does not change when extending an abstract class
    super(name);
    this.totalShips = totalShips;

    //abstract method
    public ActivateSelf(){
        //console.log(`NavyBase [${this.name}] has been activated!`);
      console.log('NavyBase ' + this.name + ' has been activated!'');
    }
  }

};

console.log('Printing starts');

const army = new ArmyBase("First Army Base", 100);
const navy = new NavyBase("First Navy Base", 3);

const anotherArmy : Activatable = new ArmyBase("Second Army Base", 250);

console.log('Army base', army)
console.log('Another Army Base', anotherArmy)
console.log('Navy Base', navy)

army.ActivateSelf();
anotherArmy.ActivateSelf();
navy.ActivateSelf();

Firebug lite被添加到小提琴中，无论如何，您都可以通过以下链接添加： https://getfirebug.com/firebug-lite-debug.js

Answer 1

更改

console.log('ArmyBase ' + this.name + ' has been activated!'');

使用

console.log('ArmyBase ' + this.name + ' has been activated!');

（与navyBase相同-> 5个引号而不是4个引号）

您也可以这样做：

console.log(`ArmyBase ${this.name} has been activated!`);

Answer 2

尝试进行如下较小的修改：

1）更改

console.log('ArmyBase ' + this.name + ' has been activated!'');

到

console.log('ArmyBase ' + this.name + ' has been activated!');

2）更改

console.log('NavyBase ' + this.name + ' has been activated!'');

到

console.log('NavyBase ' + this.name + ' has been activated!');

3）将以下构造函数的右大括号移动到正确的位置：

constructor(name: string, totalShips: number)
constructor(name: string, totalSoldiers: number)

更新后的代码为：

console.log('setup');

interface Activatable {
    //ActivateSelf: () => void;
  ActivateSelf(): void;
}

//abstract keyword, abstract classes are allowed to implement interface
//cannot do new AbstractBase, need sub classes to do method implementation same as C#
abstract class AbstractBase implements Activatable {    
  constructor(public name: string){}

  //abstract method, this satisfies the req due to implementing interface
  abstract ActivateSelf(): void;
};

class ArmyBase extends AbstractBase {
    totalSoldiers: number;
  name: string

  constructor(name: string, totalSoldiers: number){
    //extending a class, need to call a super in the constructor
    //this does not change when extending an abstract class
    super(name);
    this.totalSoldiers = totalSoldiers;
  }

    //abstract method
    public ActivateSelf(){
        //console.log(`ArmyBase [${this.name}] has been activated!`);
      console.log('ArmyBase ' + this.name + ' has been activated!');
    }
  };


class NavyBase extends AbstractBase {
    totalShips: number;
  name: string

  constructor(name: string, totalShips: number){
    //extending a class, need to call a super in the constructor
    //this does not change when extending an abstract class
    super(name);
    this.totalShips = totalShips;
  }

    //abstract method
    public ActivateSelf(){
        //console.log(`NavyBase [${this.name}] has been activated!`);
      console.log('NavyBase ' + this.name + ' has been activated!');
    }
  };

console.log('Printing starts');

const army = new ArmyBase("First Army Base", 100);
const navy = new NavyBase("First Navy Base", 3);

const anotherArmy : Activatable = new ArmyBase("Second Army Base", 250);

console.log('Army base', army)
console.log('Another Army Base', anotherArmy)
console.log('Navy Base', navy)

army.ActivateSelf();
anotherArmy.ActivateSelf();
navy.ActivateSelf();

控制台输出为：

setup
Printing starts
Army base ArmyBase { name: 'First Army Base', totalSoldiers: 100 }
Another Army Base ArmyBase { name: 'Second Army Base', totalSoldiers: 250 }
Navy Base NavyBase { name: 'First Navy Base', totalShips: 3 }
ArmyBase First Army Base has been activated!
ArmyBase Second Army Base has been activated!
NavyBase First Navy Base has been activated!

类型脚本中的抽象类

2 个答案: