继承抽象泛型类的子类方法如何正确设置TypeScript类型

问题根源 #

你定义的基类存在泛型参数冲突问题：

• 基类BaseClass<T>本身声明了类级泛型参数T，但你在all方法上又额外声明了一个独立的方法级泛型参数<T>，后者会覆盖前者，二者完全没有关联。
• 调用all()时你没有显式指定方法级的泛型参数，TypeScript 无法自动推导该类型，只能默认推导为unknown，因此会报unknown[]不能赋值给Tag[]的错误。

最优修复方案 #

不需要每次调用都手动传入泛型，只需要修改基类的all方法定义，删掉方法级的重复泛型声明，直接复用类级的T即可：

export abstract class BaseClass<T> {
  BASE_URL = CONFIG.BACKEND_URL
  protected constructor(protected http: HttpClient) {
    this.BASE_URL = `${this.BASE_URL}${this.getModelURL()}`
  }
  // 移除方法前的<T>，直接使用类声明的泛型T
  all(): Observable<T[]> {
    // 同时给http.get指定正确的返回结构类型，避免用any
    return this.http.get<{data: T[]}>(this.BASE_URL)
      .pipe(map(response => response.data))
  }
}

同时注意你代码里的笔误：基类名为BaseClass，但TagService继承的是BaseAPIService，需要保持二者名称一致，否则也会出现类型问题。

效果 #

修改完成后，原有调用代码无需加额外的泛型声明即可正常工作，TypeScript会自动推导all()返回的是Tag[]类型：

// 无需指定泛型，类型自动匹配
this.tagService.all().subscribe(tags => this.tags = tags)

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