TypeScript泛型类继承问题：如何让子类调用对应父类方法

问题分析 #

你当前的代码中，Table类直接继承了BasicTable，printData方法里的super.addData()会固定调用BasicTable的方法——泛型T只是类型约束，并没有和实际的实例方法调用绑定，所以无论A还是B的实例，最终都会执行BasicTable的addData，无法达到A用BasicTable方法、B用BasicHtmlTable方法的需求。

解决方案：通过实例持有替换继承绑定 #

核心思路是让Table类不再直接继承BasicTable，而是持有泛型T的具体实例，通过调用实例的方法来实现动态绑定。具体代码如下：

class BasicTable {
  addData() {
    console.log("******** BasicTable");
  }
}

class BasicHtmlTable extends BasicTable {
  override addData() {
    console.log("--------- BasicHtmlTable");
  }
}

// 重构Table类，通过构造注入持有泛型实例
class Table<T extends BasicTable> {
  private tableImpl: T;

  constructor(tableImpl: T) {
    this.tableImpl = tableImpl;
  }

  printData() {
    console.log("--------- Table");
    this.tableImpl.addData(); // 调用持有的具体实例方法
  }
}

class A extends Table<BasicTable> {
  constructor() {
    super(new BasicTable()); // 注入BasicTable实例
  }

  test() {
    this.printData();
  }
}

class B extends Table<BasicHtmlTable> {
  constructor() {
    super(new BasicHtmlTable()); // 注入BasicHtmlTable实例
  }

  test() {
    this.printData();
  }
}

const aInstance = new A();
const bInstance = new B();

aInstance.test(); 
// 输出：
// --------- Table
// ******** BasicTable

bInstance.test();
// 输出：
// --------- Table
// --------- BasicHtmlTable

方案说明 #

1. 解耦继承关系：Table不再继承BasicTable，而是通过泛型约束接收BasicTable及其子类的实例，避免了静态继承带来的方法绑定限制。
2. 依赖注入：A和B在构造时分别传入对应的实例，确保printData调用的是对应类的addData方法。
3. 类型安全：泛型约束保证了注入的实例一定是BasicTable或其子类，不会出现类型错误。

备选方案：利用抽象类强制子类实现方法 #

如果需要保留Table与BasicTable的继承关系，可以将Table定义为抽象类，强制子类重写addData方法：

class BasicTable {
  addData() {
    console.log("******** BasicTable");
  }
}

class BasicHtmlTable extends BasicTable {
  override addData() {
    console.log("--------- BasicHtmlTable");
  }
}

abstract class Table extends BasicTable {
  abstract addData(): void;

  printData() {
    console.log("--------- Table");
    this.addData(); // 调用子类实现的addData
  }
}

class A extends Table {
  override addData() {
    super.addData(); // 复用BasicTable的实现
  }

  test() {
    this.printData();
  }
}

class B extends Table {
  override addData() {
    new BasicHtmlTable().addData(); // 调用BasicHtmlTable的实现
  }

  test() {
    this.printData();
  }
}

这种方案适合需要Table继承BasicTable其他方法的场景，但灵活性不如第一种方案。

内容的提问来源于stack exchange，提问作者Abdur Rahman