代码之家 › 专栏 › 技术社区 › Limbo

消除数组<T>和IObservableArray<T>不兼容

mobx-react mobx types typescript

1

Limbo · 技术社区 · 7 年前

假设我的存储中有一些属性是某种类型的数组 MyType 装饰可观察到:

class MyStore {
    @observable array
}

我知道在正常的世界里这应该是一个 Array<MyType> . 但当我这样宣布的时候,

class MyStore {
    @observable array: Array<MyType>
}

.remove(item: MyType) . 另一方面,如果我用 IObservableArray<MyType> ,

class MyStore {
    @observable array: IObservableArray<MyType>
}

那我就失去了合法转让 数组<MyType> 合法地 ... as IObservableArray<MyType> -这种方法的缺点太明显了:不必要的代码太多,类型应该在使用时导入,等等)

我还尝试使用并集和交集类型:

交叉口( Array<MyType> & IObservableArray<MyType> 数组<MyType> Property 'spliceWithArray' is missing in type MyType .
工会( Array<MyType> | IObservableArray<MyType> .remove(项目:MyType) .

我是错过了什么还是误解了什么?有什么合法的方法可以打败它吗?提前谢谢大家!

顺便说一下 mobx 4

1 回复 | 直到 7 年前

1

2

Shevchenko Viktor 6 年前

您需要使用下一个语法,这不会生成任何TS错误。你可以安全地使用这两种方法 Array IObservableArray

class MyStore {
  readonly array = observable<MyType>([])

  @action
  getItems() {
    api.getItems<MyType[]>().then((response) => this.array.replace(response.data));
  }

  @action
  removeItem(item: MyType) {
    this.array.remove(item);
  }
}

只读 -因为你基本上不打算为 array this.array = itemsFromServer

更换,拆卸 -IObservableArray方法

2

1

cs95 abhishek58g 7 年前

既然你被锁在mobx@4.6.0,在版本升级时维护接口没有问题。

这并不理想,但这是我能想到的唯一一种方法,它允许您分配数组并使用.remove()等方法。

我称之为 :

import {IArrayChange, IArraySplice, IArrayWillChange, IArrayWillSplice, IInterceptor, IObservableArray, Lambda, observable} from "mobx";

interface MyExtendedObservableArray<T> extends Array<T>{
    spliceWithArray?(index: number, deleteCount?: number, newItems?: T[]): T[];
    observe?(listener: (changeData: IArrayChange<T> | IArraySplice<T>) => void, fireImmediately?: boolean): Lambda;
    intercept?(handler: IInterceptor<IArrayWillChange<T> | IArrayWillSplice<T>>): Lambda;
    clear?(): T[];
    peek?(): T[];
    replace?(newItems: T[]): T[];
    find?(predicate: (item: T, index: number, array: IObservableArray<T>) => boolean, thisArg?: any, fromIndex?: number): T | undefined;
    findIndex?(predicate: (item: T, index: number, array: IObservableArray<T>) => boolean, thisArg?: any, fromIndex?: number): number;
    remove?(value: T): boolean;
    move?(fromIndex: number, toIndex: number): void;
    toJS?(): T[];
    toJSON?(): T[];
}

class MyType{}
let myType = new MyType();

class MyStore {
    @observable array: MyExtendedObservableArray<MyType> = [myType] 
    // no TSC compilation error
}