TypeScript泛型返回类型不兼容：函数返回值无法匹配泛型解析类型

问题原因 #

这段代码里的getDisplayName函数用了泛型条件类型作为返回值，但TypeScript的控制流分析没办法把函数内部的类型守卫（"firstName" in item）和泛型条件类型的分支对应起来：

• 泛型参数TItem是在函数调用时确定的，函数执行阶段TS没法追踪TItem是否满足extends Human的条件
• 虽然类型守卫能把item收窄到Human或Animal，但TS无法确认当前分支的返回值和泛型条件类型的匹配关系，因此抛出类型不兼容错误

解决方案 #

方案1：使用函数重载（推荐） #

通过函数重载明确不同输入类型对应的返回类型，TS能精准匹配分支逻辑，不需要额外断言：

interface Animal {
  name: string;
}

interface Human {
  firstName: string;
  lastName: string;
}

type HumanName = { humanName: string };
type AnimalName = { animalName: string };

// 重载签名：定义输入输出的类型对应关系
function getDisplayName(item: Human): HumanName;
function getDisplayName(item: Animal): AnimalName;
// 实现签名：处理具体逻辑
function getDisplayName(item: Human | Animal) {
  if ("firstName" in item) {
    return { humanName: `${item.firstName} ${item.lastName}` };
  } else {
    return { animalName: item.name };
  }
}

方案2：添加类型断言 #

如果要保留泛型条件类型，可以在返回值处添加类型断言，手动告诉TS当前分支的返回值符合条件类型：

interface Animal {
  name: string;
}

interface Human {
  firstName: string;
  lastName: string;
}

type HumanName = { humanName: string };
type AnimalName = { animalName: string };

export const getDisplayName = <TItem extends Animal | Human>(
  item: TItem
): TItem extends Human ? HumanName : AnimalName => {
  if ("firstName" in item) {
    return { humanName: `${item.firstName} ${item.lastName}` } as TItem extends Human ? HumanName : AnimalName;
  } else {
    return { animalName: item.name } as TItem extends Human ? HumanName : AnimalName;
  }
};

说明 #

函数重载方案更贴合TypeScript的类型系统设计，代码可读性和类型安全性更高；类型断言方案保留了泛型的灵活性，但需要手动维护断言与条件类型的一致性。

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