IObservableArray annotation

[edshav]

Is there a better way to annotate IObservableArray to use its unique methods like remove?

import { IObservableArray, makeAutoObservable } from "mobx";
import { Item } from "./ItemModel";

class ItemList {
 constructor(public items: Item[] = []) {
    makeAutoObservable(this);
  }  

addItem = (value: string) => {
    this.items.push(new Item(value, this));
  };

removeItem = (itemToRemove: Item) => {
    (this.items as IObservableArray<Item>).remove(itemToRemove);
  };
}

[danielkcz]

By better, you mean what exactly? Is this not working for you?

[edshav]

This is working for me, but is there a way to annotate everything at once?

[edshav]

Is there any syntax that allows typescript to set types by inferring?

[danielkcz]

Well, you don't have items defined as a class property. In theory, you can declare the type on it instead of in each method. Inference won't probably work here.

[mweststrate]

Public modifier declares it as class prop implicitly. I'd declare it as IObservableArray<Item> instead explicitly and cast the initial assignment Op zo 1 nov. 2020 20:53 schreef Daniel K. <notifications@github.com>:

…

Well, you don't have items defined as a class property, in theory, you can declare the type on it instead of in each method. Inference won't probably work here. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2581 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBCOVV2PE55YLXN6DQLSNXDFZANCNFSM4TGWPYHQ> .

[edshav]

How can I cast the initial assignment as IObservableArray<Item> ?

I created this sandbox

[danielkcz]

Easiest is as any, if you want strict, then as IObservableArray<Item>

[edshav]

Thank you, guys. Now it looks better:

import { IObservableArray, makeAutoObservable } from "mobx";
import { Item } from "./ItemModel";

export class ItemList {
  public items: IObservableArray<Item>;

  constructor(items: Item[] = []) {
    this.items = items as IObservableArray<Item>;
    makeAutoObservable(this);
  }

  addItem = (value: string) => {
    this.items.push(new Item(value, this));
  };

  removeItem = (itemToRemove: Item) => {
    this.items.remove(itemToRemove);
  };
}

[edshav]

And now we can use this.items without additional annotation in every method of the class