flowtype - 如何使用 Flow 类型检查器扩展数组？

Question

在 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’。”当我尝试声明组件的 props 时，出现此错误:

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

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

Answer 1

我可能很久以前就有了这个解决方案，但我的 ESLint 配置正在提示，而且由于 no-undef 错误，我可能从未检查过这个结果。

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