Flow：函数接收含可选属性的多类型参数报错，求兼容方案

我之前也碰到过类似的Flow类型校验坑，咱们先理清楚核心原因，再给出几种可行的解决办法：

问题根源 #

你的代码里，b函数接收的是Bar | Foo联合类型参数，Flow对联合类型的属性访问有严格规则：只有所有类型成员都存在的属性，才能直接解构或访问。Bar类型没有id属性，所以你直接解构id的时候，Flow会立即报错——哪怕你之后会检查id是否存在，解构这一步已经违反了类型约束。

可行解决方案 #

方案1：用in操作符做类型缩小，避免提前解构id #

不要在函数参数里直接解构id，保留完整的参数对象，先用'id' in args让Flow把参数类型缩小为Foo，再访问id：

type Foo = { bar: string, id?: string };
type Bar = { bar: string };
const a = (args: Bar) => { b(args); }
const c = (args: Foo) => { b(args); }
const b = (args: Bar | Foo) => { 
  console.log(args.bar); // 没问题，两个类型都包含bar属性
  // 先检查id属性存在，再检查值非空
  if ('id' in args && args.id) {
    console.log(args.id); // 这里Flow明确知道args是Foo类型，id存在
  }
}

方案2：抽离基础类型，优化类型结构 #

把两个类型的公共部分抽成基础类型，让Foo继承它，这样类型结构更清晰，Flow的推断也会更准确：

// 抽离公共基础类型
type BaseItem = { bar: string };
type Foo = BaseItem & { id?: string };
type Bar = BaseItem;

const a = (args: Bar) => { b(args); }
const c = (args: Foo) => { b(args); }
const b = (args: BaseItem | Foo) => { 
  if ('id' in args && args.id) {
    console.log(args.id);
  }
}

方案3：如果一定要解构，先做类型判断 #

如果你坚持要解构id，可以先通过类型判断把id安全取出来，避免Flow报错：

const b = (args: Bar | Foo) => { 
  const { bar } = args; // bar是公共属性，解构没问题
  // 先判断id是否存在于参数中，再赋值
  const id = 'id' in args ? args.id : undefined;
  if (id) {
    console.log(id);
  }
}

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