TypeScript中如何用泛型让扩展类方法返回子类实现链式调用？

当然可以用泛型解决这个问题！核心思路是让父类的方法返回当前子类的类型，而不是父类本身的类型，这样链式调用时就能保持子类的类型信息，完全不会丢失自动补全功能。

具体实现步骤： #

1. 给抽象基类Params添加泛型参数T，这个泛型代表最终的子类类型（也就是我们希望方法返回的类型）。
2. ListParams继承Params时，同样传递泛型参数T，并在setSkip方法中返回T类型。
3. 子类MyEntityParams继承ListParams时，把自身作为泛型参数传入，这样父类的所有方法都会返回MyEntityParams类型。

完整代码示例： #

abstract class Params<T> {
  protected params = {};
  protected constructor() {}
}

abstract class ListParams<T> extends Params<T> {
  protected constructor() {
    super();
  }
  setSkip(skip: number): T {
    this.params['skip'] = skip;
    return this as unknown as T;
  }
}

class MyEntityParams extends ListParams<MyEntityParams> {
  constructor() {
    super();
  }
  setTitle(title: string): MyEntityParams {
    this.params['title'] = title;
    return this;
  }
}

验证链式调用： #

现在你可以正常进行链式调用，编辑器会自动补全setTitle方法，类型提示完全正常：

const myEntityParams = new MyEntityParams();
myEntityParams
  .setSkip(0) // 返回MyEntityParams类型
  .setTitle('HelloWorld'); // 可以直接调用，有完整自动补全

原理说明： #

• 通过泛型T把父类和子类的类型关联起来，父类方法返回T，而子类继承时明确指定T为自身，这样父类方法就会返回子类类型。
• return this as unknown as T是因为TypeScript无法直接推断this就是T，需要做一次安全的类型断言——毕竟我们在子类继承时已经明确了T就是子类本身，不会有类型不匹配的问题。

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