Types of an types.model narrowed from a union with a literal don't have actions?

[davidatsurge]

Consider:

const Bed = types.model({}).actions((self) => ({
  addBlankets() {
    1 + 1;
  },
}));

const Room = types
  .model({
    bed: types.union(types.literal("loading"), Bed),
  })
  .actions((self) => ({
    addBlanketsOnBed() {
      if (self.bed != "loading") {
        self.bed.addBlankets(); // typescript complains that `addBlankets` is not a function here.
      }
    },
  }));

I'm currently resorting to: doing (self.bed as Instance<typeof Bed>).addBlankets();, but I'd love to know if I'm missing something, or this is a known limitation as of now.

[antondomratchev]

Sounds like you are mixing state of the application i.e. loading and model types. Simpler and better to understand solution would be to have the loading state be managed by the model instead of relying on complex type juggling. A view could even work if you are not happy with adding a isLoading property on the model.

[davidatsurge]

My motivation for doing a union like this is I want to follow the mantra of "make illegal states unrepresentable" through the type system. That is, if the state is loading, I don't want the type system to allow setting other attributes on Bed. I don't see how I can avoid that without having a union somewhere. That is, if I just do:

const Bed = mode.types({
  isLoading: types.boolean,
  someOtherAttribute: ...
  })

(which, I think is what you're suggesting), then I don't represent in the type system that someOtherAttribute should not be able to be modified while isLoading is true.

Does that make sense?

[antondomratchev]

I am not sure that the implementation you are looking for is implied in the illegal state. You are forcing the illegal state by making the type ambiguous. The model will enforce that the type will not be ambiguous by making it highly structured. With a union you are confusing the type system by saying it can either be a string or an instance of a model, this can also confuse a developer that is not familiar with your thinking. Here is an example of how you can present a finite state using MST https://mobx-state-tree.js.org/intro/philosophy.

[davidatsurge]

I wasn't sure what you meant by much of that. I figured out a way that "makes illegal states unrepresentable" in a way that MST+typescript don't break, and posted that answer here.

I'm not sure if that's what you were trying to communicate to me the whole time. In any case, thank you very much for your precious time!!

[davidatsurge]

So, it turns out the following works (ie, doesn't trip up typescript), and it fulfills my desire to "make illegal states unrepresentable", and it follows the more standard pattern of "tagged unions" anyways:

const Bed = types.model({}).actions((self) => ({
  addBlankets() {
    // adding blankets
  },
}));

const Room = types
  .model({
    bed: types.union(
      types.model({status: types.literal("loading")}),
      types.model({status: types.literal("loaded"), item: Bed})
    )
  })
  .actions((self) => ({
    addBlanketsOnBed() {
      if (self.bed.status != "loading") {
        self.bed.item.addBlankets();
      }
    },
  }));