TypeScript泛型子类T<Y>无法赋值给父类T<X>类型错误如何解决

错误根源 #

所有类型错误本质来自两个核心问题：

1. TS泛型默认是不变性约束：Graph<FileNode>和Graph<Node>被判定为完全不兼容的两种类型，无法互相赋值
2. 基类Node硬编码了构造参数类型为Graph<Node>，子类无法传入更具体的Graph<FileNode>类型

代码修复方案 #

通过给Node基类增加泛型约束就能解决所有类型报错，改造后完整代码如下：

type Listener<T> = (e: T) => any
class EventEmitter<T> {
  private listeners: Listener<T>[] = []
  fire(data: T): void {}
}
// 给Node加泛型递归约束，允许子类传入自身类型
abstract class Node<T extends Node<T>> {
  constructor(readonly graph: Graph<T>, readonly data: string) {}
}
// 子类继承时传入自身类型作为泛型参数
class FileNode extends Node<FileNode> {
  constructor(readonly graph: Graph<FileNode>, readonly file: string, data: string) {
    super(graph, data)
  }
}
// 同步修改Provider的泛型约束
abstract class Provider<T extends Node<T>> {
  _onDidCreate = new EventEmitter<T>()
  abstract setup(graph: Graph<T>): void
}
// 同步修改Graph的泛型约束
class Graph<T extends Node<T>> {
  constructor(readonly provider: Provider<T>) {}
}

改造后你的使用示例可以正常运行，不会再报类型错误：

import * as vscode from "vscode"
export class VSCodeProvider extends Provider<FileNode> {
  constructor(readonly root: string) {
    super()
  }
  setup(graph: Graph<FileNode>) {
    const watcher = vscode.workspace.createFileSystemWatcher(this.root)
    watcher.onDidCreate((fileUri: vscode.Uri) => {
      this._onDidCreate.fire(new FileNode(graph, fileUri.fsPath, "...data..."))
    })
  }
}

低耦合架构优化建议 #

如果希望降低三者的耦合度，可以做以下改造：

• 抽离上下文接口：把Node需要用到的Graph能力抽成独立接口IGraphContext，Node只依赖该接口，不需要绑定具体的Graph泛型类型
• 移除Node对Graph的强依赖：节点仅存储自身业务属性，需要访问图上下文时由调用方传入接口实例，避免构造函数绑定Graph导致的泛型传导问题
• 事件托管：由Graph统一监听Provider的节点创建事件，完成节点挂载、关联建立等操作，Provider不需要感知Graph的存在，只负责输出节点数据

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