TypeScript条件泛型场景下如何避免返回值类型不兼容问题

这不是TypeScript的Bug，是函数实现的类型签名和重载声明不匹配导致的类型校验问题。

问题原因 #

你提前定义了两个函数重载，分别对应传/不传elementTypeChecker的两种场景，但实际编写的函数实现只有一个泛型签名，且返回值被固定为SpecificElement类型：

• 当elementTypeChecker为undefined时，逻辑上你要返回基础Element类型，但TypeScript无法将「elementTypeChecker不存在」这个条件和泛型SpecificElement的类型关联起来
• TypeScript的泛型约束由调用方决定，理论上SpecificElement可以是任意继承自Element的子类型，在没有校验的情况下，基础Element类型不能直接赋值给可能更具体的子类型

修复方案 #

方案1：添加类型断言（最简单） #

你已经通过重载保证了「不传elementTypeChecker时，调用方预期返回Element类型」，所以可以在报错的返回位置直接添加类型断言，告诉TypeScript当前返回值符合类型预期：

if (isUndefined(elementTypeChecker)) {
  return targetElementSearchRequestMatch[0] as SpecificElement;
}

方案2：对齐实现签名和重载 #

你也可以修改实现的返回值类型为兼容所有重载的联合类型，再配合重载使用，本质和方案1逻辑一致：

// 先保留你之前定义的两个重载
export function getExpectedToBeSingleElement(
  parametersObject: {
    selector: string;
    context?: Element | Document;
  }
): Element;

export function getExpectedToBeSingleElement<SpecificElement extends Element>(
  parametersObject: {
    selector: string;
    context?: Element | Document;
    elementTypeChecker: (element: Element) => element is SpecificElement;
  }
): SpecificElement;

// 实现的签名要兼容所有重载，返回值用联合类型
function getExpectedToBeSingleElement<SpecificElement extends Element>(
  {
    selector,
    context = document,
    elementTypeChecker
  }: {
    selector: string;
    context?: Element | Document;
    elementTypeChecker?: (element: Element) => element is SpecificElement;
  }
): Element | SpecificElement {
  // 原有逻辑不变
  if (isUndefined(elementTypeChecker)) {
    return targetElementSearchRequestMatch[0];
  }
  // 剩余逻辑不变
}

两种方案都可以解决TS2322报错，且不会影响外部调用的类型提示效果。

内容的提问来源于stack exchange，提问作者Takeshi Tokugawa YD