TypeScript双向数据转换函数类型匹配错误排查求助

方案1：使用函数重载签名 #

函数重载能明确指定不同输入对应的输出类型，完美适配你的双向转换需求：

// 重载签名：定义两种输入输出组合
function translate(data: string, toType: "number"): number | undefined;
function translate(data: number, toType: "string"): string | undefined;

// 实现签名：处理具体转换逻辑
function translate(data: string | number, toType: "number" | "string"): string | number | undefined {
  if (toType === "number") {
    const num = Number(data);
    return isNaN(num) ? undefined : num;
  } else {
    return String(data);
  }
}

// 测试类型推断
const numResult = translate("123", "number"); // 类型自动推导为 number | undefined
const strResult = translate(123, "string"); // 类型自动推导为 string | undefined

方案2：使用泛型+条件类型 #

如果想用类型约束的方式实现，可以结合泛型和条件类型，让TypeScript根据toType自动推导参数和返回值类型：

type DataTranslation<T extends "number" | "string"> = 
  T extends "number" 
    ? (data: string) => number | undefined 
    : (data: number) => string | undefined;

const translate: DataTranslation<"number"> | DataTranslation<"string"> = <T extends "number" | "string">(
  data: T extends "number" ? string : number,
  toType: T
): T extends "number" ? number | undefined : string | undefined => {
  if (toType === "number") {
    const num = Number(data as string);
    return isNaN(num) ? undefined : num as any;
  } else {
    return String(data as number) as any;
  }
};

两种方案里，函数重载的写法更简洁易读，推荐优先使用。

原方案报错的原因 #

你定义的DataTranslation是函数类型的联合，意味着这个变量只能是两种函数中的某一种：要么是接收{toType: "number", data: string}并返回number|undefined的函数，要么是接收{toType: "string", data: number}并返回string|undefined的函数。

但你写的实现是一个同时处理两种情况的单一函数，它的参数是两种情况的联合，返回值也是两种情况的联合。TypeScript静态检查会要求这个实现能满足联合类型里的每一个分支，但它无法确定你的函数在接收{toType: "number", data: string}时绝对不会返回string，因此抛出类型不兼容的错误。

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