如何使用 Flow 类型检查器扩展数组？答案

【问题标题】：How do I extend an array with the Flow type checker?如何使用 Flow 类型检查器扩展数组？
【发布时间】：2016-03-28 17:06:51
【问题描述】：

在一个 React 项目中，我正在使用 MobX 库。它允许您做的一件事是编写代码，就像您使用原语一样，但在幕后 MobX 正在做一些可观察到的魔法。我也在这个项目中使用 Flow，并且很难找出正确的语法来应用于 MobX 可观察数组，这些数组至少有两个额外的方法，replace 和 peek。

此代码的 TS 文件非常深入，我对打字还很陌生。 TS 文件可以在这里找到：

https://github.com/mobxjs/mobx/blob/master/src/types/observablearray.ts

我在 Flow 中尝试过的任何语法都不起作用，它可能都非常幼稚/无知。

interface ObservableArray {
  join(str: string): string;
  replace(arr: Array<any>): ObservableArray;
  map(mapFunction: Function): Array<any>;
  reduce(reducerFunction: Function, initialValue: any): any;
  peek(): Array<any>;
}

type MobxArray = ObservableArray;

或

interface ObservableArray extends Array {
  peek(): Array<any>;
  replace(arr: Array<any>): MobxArray<any>;
}

type MobxArray = ObservableArray;

大多数情况下，我都会收到此错误“预期为多态类型而不是类型 'MobxArray'。”当我尝试为组件声明道具时出现此错误：

type MyComponentProps = {
    myArray: MobxArray<string>;
};

const MyComponent = observer(({ myArray }: MyComponentProps) => (
    <div>{ ... code ... }</div>
));

【问题讨论】：

标签： flowtype mobx

【解决方案1】：

我可能很久以前就有这个解决方案，但是我的 ESLint 配置一直在抱怨，而且由于 no-undef 错误，我可能从来没有检查过这个结果。

interface MobxArray<V> extends Array<V> {
  replace(arr: Array<V>): MobxArray<V>;
  peek(): Array<V>;
}

【讨论】：

【解决方案2】：

我不知道是否可以将 TypeScript .d.ts 文件自动转换为 flow，但是如果你查看包本身，你会发现 lib/ 目录下的 .d.ts 文件中的所有接口，即可能使转换更容易（那些不在 github 上，因为它们是在构建期间生成的）

编辑：也许你甚至可以直接参考 mobx/lib/index.d.ts，接口的流语法看起来很相似。

【讨论】：

自从提出这个问题以来，mobx 是否曾经发布过流类型？我以为我听说他们做到了，但我在文档中找不到