Mobx-State-Tree - Assign to Array Type

Question

I have this basic model.

const stuff = types.model({
  term: types.string,
  excludeTerm: types.string,
  stores: types.array(types.string)
}).actions(self => ({
  setTerm(term: string) {
    self.term = term
  },
  setExcludeTerm(term: string) {
    self.excludeTerm = term
  },
  setStores(stores: string[]) {
    self.stores = stores   // <<< the lint error is on this line
  }
}))

I get the following TS Lint error:

Type 'string[]' is not assignable to type 'IMSTArray<ISimpleType> & IStateTreeNode<IArrayType<ISimpleType>>'. Type 'string[]' is missing the following properties from type 'IMSTArray<ISimpleType>': spliceWithArray, observe, intercept, clear, and 4 more.ts(2322)

This is an annoying error. I can fix it by assigning like this: (self as any).stores = stores but I want to stop doing hacks to my code.

The question is why I get this error? Is there another way to assign to an array type in mobx-state-tree?

I couldn't find in mobx-state-tree a more detailed documenation for working with arrays. Does anyone know any?

Answer 1

The solution is to use cast:

import { cast } from "mobx-state-tree"

// .....

self.stores = cast(stores)

This is because MST enables snapshots to be assigned to actual values, and automatically converts them. This doesn't just apply to arrays, but to all types of values. However, typescript doesn't have support for an assignment to be more narrow that the thing it is being assigned to, which is the reason the cast is needed. cast doesn't do anything, but it helps TS to figure out that this assignment is valid

Answer 2

You can use self.stores.replace(stores)

Here are the docs for MST, these are really the only docs I have seen out there: https://github.com/mobxjs/mobx-state-tree

There is also a function setLivelinessCheck('error') that helps a lot with debugging locally to see errors that may occur. It is in the list of API Overview functions: https://github.com/mobxjs/mobx-state-tree#api-overview