TypeScript中如何实现返回类型为`TResponse | TError`的抽象方法？

你遇到的问题本质是泛型约束与实现返回值的兼容性不匹配：父类的抽象方法定义了开放的泛型参数（调用方可以传入任意MyResponse/UIError的子类型），但子类的实现只能返回固定的MyResponse | UIError<any>类型，这自然无法兼容所有可能的泛型参数组合。

下面我会分步骤解释问题原因，然后给出三种合理的修复方案：

问题原因拆解 #

在你的原始代码中，父类BaseClass的userAuth方法使用了泛型参数TResponse extends MyResponse和TError extends UIError，这意味着调用方可以传入任意符合约束的子类型，比如：

// 调用方可以自定义更具体的Response和Error类型
class CustomResponse extends MyResponse {
  extra: string;
}
class CustomError extends UIError<{code: number}> {}

const instance = new TestClass();
// 期望返回Promise<CustomResponse | CustomError>
instance.userAuth<CustomResponse, CustomError>();

但你的子类实现只能返回MyResponse | UIError<any>，这显然无法兼容CustomResponse（多了extra字段）或CustomError（error是特定结构），所以TypeScript会抛出类型不兼容的错误。

方案1：将泛型参数从方法级别移到类级别（推荐，类型安全） #

如果每个子类的userAuth方法返回的是固定的TResponse和TError类型，那么把泛型参数定义在类级别更合理：

type MyResponse = {
  data: any;
};

type UIError<TError = unknown> = {
  error: TError;
};

// 类级别泛型，指定当前类支持的Response和Error类型
abstract class BaseClass<TResponse extends MyResponse = MyResponse, TError extends UIError = UIError> {
  public abstract userAuth(): Promise<TResponse | TError>;
}

// 子类继承时指定具体的泛型参数
class TestClass extends BaseClass<MyResponse, UIError<any>> {
  public userAuth(): Promise<MyResponse | UIError<any>> {
    // 这里可以根据业务逻辑返回data或error
    if (Math.random() > 0.5) {
      return Promise.resolve({ data: { id: 123 } });
    } else {
      return Promise.resolve({ error: "Auth failed" });
    }
  }
}

这种方式下，子类的返回类型完全匹配父类的约束，TypeScript不会再报错，而且类型安全。

方案2：调整基础类型为泛型，支持动态的TData和TError #

如果你的需求是让userAuth方法支持任意的data和error类型（由调用方指定），那么应该把MyResponse和UIError改为泛型类型，同时让方法的泛型参数对应data和error的具体类型：

// 改为泛型的基础类型
type MyResponse<TData = any> = {
  data: TData;
};

type UIError<TError = unknown> = {
  error: TError;
};

abstract class BaseClass {
  // 方法泛型直接对应data和error的类型
  public abstract userAuth<TData, TError = unknown>(): Promise<MyResponse<TData> | UIError<TError>>;
}

class TestClass extends BaseClass {
  public userAuth<TData, TError = unknown>(): Promise<MyResponse<TData> | UIError<TError>> {
    // 用类型断言确保返回值符合泛型要求（业务逻辑中需保证类型正确性）
    if (Math.random() > 0.5) {
      return Promise.resolve({ data: {} as TData });
    } else {
      return Promise.resolve({ error: {} as TError });
    }
  }
}

这种方式下，调用方可以自由指定返回的data和error类型，比如：

const instance = new TestClass();
// 期望返回Promise<{data: {id: number}} | {error: string}>
instance.userAuth<{id: number}, string>().then(result => {
  if ('data' in result) {
    console.log(result.data.id); // 类型推断为number
  } else {
    console.log(result.error.length); // 类型推断为string
  }
});

方案3：临时解决（类型断言） #

如果你只是想快速消除报错（不推荐，存在类型风险），可以在子类的返回值上使用类型断言：

class TestClass extends BaseClass {
  public userAuth<
    TResponse extends MyResponse = MyResponse,
    TError extends UIError = UIError<any>
  >(): Promise<TResponse | TError> {
    // 用类型断言告诉TS返回值符合泛型约束
    return Promise.resolve({ data: {} } as TResponse | TError);
  }
}

注意：这种方式会跳过TypeScript的类型检查，如果你返回的实际值不符合调用方指定的TResponse或TError类型，会导致运行时问题，所以仅建议在临时调试时使用。

备注：内容来源于stack exchange，提问作者Ron Zano