关于Flow对自定义Product类型数组的代码覆盖率统计存疑

先把你的代码整理成规范格式，方便排查问题：

类型定义文件（types.js） #

// types.js
export type Product = { id: number, name: string }

组件代码 #

import type { Product } from './types'
type Props = { products: Product[] }
const MyComponent = ({ products }: Props) => (
  <ul>
    {products.map( (product: Product) => <li key={product.id}>{product.name}</li> )}
  </ul>
)

你提到执行yarn flow coverage path/to/this/component时遇到困惑，虽然没说明具体问题，但结合Flow覆盖率工具的常见问题，我整理了几个可能的排查方向：

• 覆盖率结果不符合预期
  比如明明代码里都用到了Product类型，却显示部分未覆盖。首先要确认Flow是否正确识别了你的类型导入——有时候路径拼写错误会导致类型未被加载，进而让覆盖率统计出错。另外，你在map回调里给product显式标注了Product类型，其实这里Flow可以通过products: Product[]自动推断出product的类型，这个显式标注不会影响功能，但可以尝试去掉后重新运行覆盖率命令，看看结果是否变化。

• 命令执行报错
  先检查你传入的组件路径是否准确，不管是相对路径还是绝对路径，都要确保指向正确的组件文件。另外，不同版本的Flow对coverage命令的支持可能有差异，你可以尝试更新Flow到最新稳定版，或者检查项目根目录的.flowconfig文件，看看有没有配置项干扰了覆盖率统计。

• 覆盖率统计偏低
  要注意Flow的覆盖率统计的是类型检查的覆盖情况，不是代码执行覆盖。如果你的组件没有被其他代码引用、或者没有传入符合类型要求的数据触发类型检查，覆盖率就会看起来偏低。你可以尝试在项目的某个地方引入MyComponent并传入合法的Product[]数据，再重新运行覆盖率命令试试。

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