Flow泛型数组为何出现自身不兼容错误？

我来帮你搞定这个看起来有点诡异的Flow错误！那句“Tv [1]与Tv [1]不兼容”的报错，其实是Flow处理类属性箭头函数和类泛型参数时的常见问题。

问题根源 #

你用了类属性箭头函数（getList = () => {}这种写法），虽然箭头函数的词法this能正确绑定到实例，但Flow不会自动让这类箭头函数继承类的泛型<Tv>。它会把箭头函数里的Tv当成一个和类泛型无关的独立类型，最终抛出这种“自身不兼容”的奇怪提示。

解决方案1：改用普通类方法（推荐） #

把箭头函数改成原型方法，Flow就能正确识别并关联类的泛型参数了，代码也更简洁：

/* @flow */
export default class ListHolder<Tv> {
  getList(): Array<Tv> {
    return [];
  }
  iterateOverList(): mixed {
    // 这里还可以把item的类型从mixed改成Tv，类型检查更准确
    return this.getList().map((item: Tv, index: number) => {
      return null;
    });
  }
}

解决方案2：给箭头函数显式声明泛型 #

如果你因为业务需求必须保留箭头函数（比如需要固定this指向），可以在箭头函数上显式绑定类的泛型参数：

/* @flow */
export default class ListHolder<Tv> {
  getList = <Tv>((): Array<Tv> => {
    return [];
  });
  iterateOverList = (): mixed => {
    return this.getList().map((item: Tv, index: number) => {
      return null;
    });
  };
}

不过这个写法相对冗余，本质是给箭头函数重新声明了同名泛型，所以更推荐第一种方案。

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