如何让子类A/B实例的get()方法返回对应专属类型而非联合类型？

这个问题其实是TypeScript中常见的返回类型协变和类型推断场景，咱们可以用两种简洁的方式解决：

方案一：泛型父类（最直观的类型约束方式） #

通过给父类Parent添加泛型参数，让子类继承时明确指定自己的data类型，这样get方法就能精准返回对应类型：

// 先定义你的数据类型（假设之前未明确）
type dataA = { id: string; type: 'A' };
type dataB = { value: number; type: 'B' };

// 模拟你的数据获取函数
function getDataA(): dataA {
  return { id: 'a123', type: 'A' };
}
function getDataB(): dataB {
  return { value: 456, type: 'B' };
}

// 泛型父类，用T约束data的类型
class Parent<T> {
  protected data: T;
  get(): T {
    return this.data;
  }
}

// 子类继承时传入各自的data类型
class A extends Parent<dataA> {
  protected data: dataA = getDataA();
}

class B extends Parent<dataB> {
  protected data: dataB = getDataB();
}

// 测试一下
const a = new A();
const resultA = a.get(); // 类型自动推断为dataA
const b = new B();
const resultB = b.get(); // 类型自动推断为dataB

为什么这个方案可行？ #

泛型参数T相当于给父类的data和get方法加了“类型占位符”，子类继承时把占位符替换成自己的具体类型，TypeScript就能精准追踪每个子类的返回类型，不会再返回联合类型。

方案二：利用this索引访问类型（最小改动方案） #

如果不想修改父类为泛型，也可以直接在父类的get方法中使用this['data']作为返回类型，让TypeScript根据实例的实际类型自动推断：

type dataA = { id: string; type: 'A' };
type dataB = { value: number; type: 'B' };

function getDataA(): dataA {
  return { id: 'a123', type: 'A' };
}
function getDataB(): dataB {
  return { value: 456, type: 'B' };
}

class Parent {
  protected data: any;
  // 使用this['data']获取当前实例的data属性类型
  get(): this['data'] {
    return this.data;
  }
}

class A extends Parent {
  protected data: dataA = getDataA();
}

class B extends Parent {
  protected data: dataB = getDataB();
}

// 测试效果一致
const a = new A();
const resultA = a.get(); // 类型为dataA
const b = new B();
const resultB = b.get(); // 类型为dataB

原理说明 #

this['data']是TypeScript的索引访问类型，它会在类型检查阶段根据调用get方法的实例类型，动态解析出该实例中data属性的具体类型。子类重写data属性后，TypeScript会自动把get的返回类型对应到子类的data类型上。

为什么原来的代码不行？ #

原来的父类Parent中，data是any类型，get方法返回dataA | dataB是手动指定的联合类型，但TypeScript无法自动关联子类的data类型和父类get的返回类型，所以不管是a.get()还是b.get()，都会返回父类定义的联合类型。上面两种方案都是通过明确类型关联，让TypeScript能正确推断子类的返回类型。

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