Question

在React项目中，我正在玩MobX库。它允许你做的一件事是编写你的代码，就像你正在使用原语，但在幕后MobX正在做一些可观察的魔术。我也在这个项目中使用Flow，并且很难找到适用于MobX可观察数组的正确语法，该数组至少有两个额外的方法，替换和窥视。

此代码的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>
));

Answer 1

很久以前我可能已经有了这个解决方案，但是我的ESLint配置抱怨了，因为no-undef错误，我可能永远不会检查这个结果。

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

Answer 2

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

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

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

2 个答案: