如何基于输入类型定义Flow.js的输出类型

嘿，我之前也碰到过这个问题！Flow其实完全可以实现这种「输入类型和返回类型一一对应」的需求，不用退而求其次用联合类型。核心是用泛型约束加上条件类型来做类型映射，我给你一步步拆解：

第一步：定义基础类型 #

先把你的输入类型（A、B）和对应的返回类型（AA、BB）明确下来，最好给它们加个区分标识（比如type字段），方便Flow做类型窄化：

// 输入类型
type A = { type: 'A', content: string };
type B = { type: 'B', content: number };

// 对应返回类型
type AA = { outputType: 'AA', result: string };
type BB = { outputType: 'BB', result: number };

第二步：创建输入到输出的类型映射 #

用Flow的条件类型，定义一个泛型类型来关联输入和输出：

// 定义输入类型到输出类型的映射规则
type InputToOutput<T> =
  T extends A ? AA :
  T extends B ? BB :
  never; // 非法输入返回never，避免错误调用

第三步：编写带泛型的处理函数 #

给函数加上泛型约束，让Flow能根据输入的具体类型推断出精准的返回类型：

function processInput<T: A | B>(input: T): InputToOutput<T> {
  // 利用type字段做类型窄化，Flow会自动识别分支里的输入类型
  if (input.type === 'A') {
    // 这里Flow知道input是A类型，所以可以安全返回AA
    return { outputType: 'AA', result: input.content };
  } else {
    // 这里Flow知道input是B类型，返回BB
    return { outputType: 'BB', result: input.content };
  }
}

测试效果 #

现在调用函数时，Flow会自动推断出精准的返回类型，而不是联合类型：

const inputA: A = { type: 'A', content: 'hello' };
const outputAA = processInput(inputA); // outputAA的类型是AA，不是AA | BB！

const inputB: B = { type: 'B', content: 123 };
const outputBB = processInput(inputB); // outputBB的类型是BB，完全匹配

为什么之前泛型没成功？ #

大概率是没结合条件类型做映射——如果只是简单给函数加泛型，Flow没法自动关联输入和输出的对应关系。通过InputToOutput<T>这个条件类型，我们明确告诉Flow：当输入是A时返回AA，输入是B时返回BB，这样就能实现精准的类型推断了。

如果之后需要扩展更多输入类型，只需要在InputToOutput里加新的条件分支，同时更新函数的泛型约束即可。

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