Typescript Union of Reference & Model

[sethdumaguin]

Hi! I have a question about an issue I ran into when I have a union of reference and a model and I try to access an action that they inherited from a Base Model.

To explain it more, I have a Base model that defines an action. This Base model is used on other models to inherit the actions that Base defines. So let's say we have something like below:

codesandbox here: https://codesandbox.io/s/inspiring-snyder-yregis?file=/src/Sample.ts

const Base = types.model('Base', { name: '' }).actions((self) => ({
  setName: (name: string) => {
    self.name = name;
  },
}));

const Foo = types.compose(
  'Foo',
  Base,
  types.model({
    type: 'Foo',
  })
);

const Bar = types.compose(
  'Bar',
  Base,
  types.model({
    id: types.identifier,
    type: 'Bar',
  })
);

const Tree = types
  .model('Tree', {
    baz: types.union(types.reference(Bar), Foo),
  })
  .actions((self) => ({
    changeName: () => {
      self.baz.setName('foo');
    },
  }));

When I am accessing self.baz, I know the union of Bar & Foo have the action setName, but I am getting a type error where it says that the action setName is not defined. When I try to remove types.reference(Bar), the TS issue disappears. However, I need it to be a reference. Is there anything I am missing here? I appreciate any help or tips. Thank you!

[coolsoftwaretyler]

Hey @sethdumaguin - sorry it took so long for folks to get back to you.

I'm not precisely sure what's going on here, but I wonder if this is an issue where TypeScript can't appropriately infer the type from the types.reference call. I was able to remove the linting error by making these changes:

import { types } from "mobx-state-tree";

const Base = types.model("Base", { name: "" }).actions((self) => ({
  setName: (name: string) => {
    self.name = name;
  }
}));

const Foo = types.compose(
  "Foo",
  Base,
  types.model({
    type: "Foo"
  })
);

const Bar = types.compose(
  "Bar",
  Base,
  types.model({
    id: types.identifier,
    type: "Bar"
  })
);

const Tree = types
  .model("Tree", {
    baz: types.union(types.reference(Bar), Foo) as typeof Bar | typeof Foo
  })
  .actions((self) => ({
    changeName: () => {
      self.baz.setName("foo");
    }
  }));

Here's the code sandbox: https://codesandbox.io/s/mobx-state-tree-todolist-forked-0lwr9n?file=/index.ts

The only change is explicitly using as, like so:

baz: types.union(types.reference(Bar), Foo) as typeof Bar | typeof Foo

I'm not sure if this is the fully correct way to do it, and I definitely don't love having to use as, but I do wonder if there's a limitation on TypeScript inferences, and maybe you just need to help the compiler a little bit here.

Is that helpful? Did you end up finding some other solution since posting this? Would love to get a sense of where you landed on this one.

[coolsoftwaretyler]

I'm gonna mark this as an answer since we didn't hear back. There are plenty of sharp edges around TS and MST, and we're working to improve that, but I think this is a reasonable workaround.