Flow：for-of循环类型推断错误问题咨询

首先，先还原一下你大概率会写出的代码示例（方便大家理解问题场景）：

type FooT = {
  id: number,
  name: string,
};

// 对应每个属性的类型校验函数
const validators = {
  id: (val: mixed): val is number => typeof val === 'number',
  name: (val: mixed): val is string => typeof val === 'string',
};

function validateFoo(obj: mixed): obj is FooT {
  if (typeof obj !== 'object' || obj === null) return false;
  
  // 问题出在这里的for-of循环
  for (const key of ['id', 'name']) {
    const typeFn = validators[key];
    // Flow会报错：无法确定typeFn的具体类型，调用时参数不匹配
    if (!typeFn((obj as FooT)[key])) {
      return false;
    }
  }
  return true;
}

为什么会出现这个问题？ #

Flow的类型系统在处理动态键访问联合类型对象时，没办法自动关联key和typeFn的对应关系：

• 它只会把typeFn推断成两个校验函数的联合类型：((val: mixed) => val is number) | ((val: mixed) => val is string)
• 联合类型的函数在调用时，要求参数必须满足所有分支的类型要求，这里自然会出现类型冲突，导致报错。

简单说：Flow不知道当key是'id'时，typeFn对应的是数字校验函数；当key是'name'时，对应字符串校验函数。

解决办法有这几种，按需选择： #

1. 用元组类型替代普通数组（最简单） #

把循环的键数组定义成元组类型，让Flow能跟踪每个元素的具体类型：

// 把数组明确标注为元组，每个元素的类型固定
const keys: ['id', 'name'] = ['id', 'name'];

for (const key of keys) {
  const typeFn = validators[key];
  // 现在Flow能准确推断key和typeFn的对应关系，不再报错
  if (!typeFn((obj as FooT)[key])) {
    return false;
  }
}

2. 用泛型+映射类型（最类型安全） #

通过映射类型让校验器和FooT的属性强绑定，再用泛型函数处理单个属性的校验：

type FooT = {
  id: number,
  name: string,
};

// 定义校验器的类型，和FooT的键一一对应
type Validators<T> = {
  [K in keyof T]: (val: mixed) => val is T[K]
};

// 强绑定FooT的校验器
const validators: Validators<FooT> = {
  id: (val): val is number => typeof val === 'number',
  name: (val): val is string => typeof val === 'string',
};

// 泛型函数处理单个属性的校验
function validateSingleKey<T, K extends keyof T>(
  obj: mixed,
  key: K,
  validator: Validators<T>[K]
): boolean {
  if (typeof obj !== 'object' || obj === null) return false;
  return validator((obj as {[key: string]: mixed})[key]);
}

function validateFoo(obj: mixed): obj is FooT {
  if (typeof obj !== 'object' || obj === null) return false;
  // 逐个校验属性，Flow能完全推断类型
  return validateSingleKey(obj, 'id', validators.id) && validateSingleKey(obj, 'name', validators.name);
}

3. 手动类型断言（适合简单场景） #

如果不想改结构，可以手动给typeFn加类型断言，明确告诉Flow当前的函数类型：

for (const key of ['id', 'name']) {
  const typeFn = validators[key];
  if (key === 'id') {
    if (!(typeFn as (val: mixed) => val is number)((obj as {id?: mixed}).id)) {
      return false;
    }
  } else {
    if (!(typeFn as (val: mixed) => val is string)((obj as {name?: mixed}).name)) {
      return false;
    }
  }
}

总结 #

这确实是Flow当前类型推断的一个限制，不是你代码的错误——它还不能自动关联循环中动态键和对应属性/函数的类型关系，但通过上面的方法都能绕过这个问题，推荐优先用元组或泛型映射类型的方案，既优雅又能保证类型安全。

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