3

在一个 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>
));
4

2 回答 2

4

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

interface MobxArray<V> extends Array<V> {
  replace(arr: Array<V>): MobxArray<V>;
  peek(): Array<V>;
}
于 2016-03-28T17:31:27.800 回答
2

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

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

于 2016-03-30T02:18:23.480 回答