TypeScript and union

[davetapley]

Following these docs but with a union:

const Foo = types.model({name: types.string, foo: types.string});
const Bar = types.model({name: types.string, bar: types.string});
const FooBar = types.union(Foo, Bar)
interface IFooBar extends Instance<typeof FooBar> {}

Yields:

An interface can only extend an object type or intersection of object types with statically known members.  TS2312

Which I suppose makes sense. Switching to type works just fine:

type FooBar = Instance<typeof FooBar> 

Maybe worth mentioning in these docs ?

---

Going further we can give Foo and Bar a type discriminator

const Foo = types.model({id: types.identifier, foo: types.string, type: types.literal("foo")});
const Bar = types.model({id: types.identifier, bar: types.number, type: types.literal("bar")});

Then we can define a model:

const Store = types.model({foobars: array(FooBar)})

const store = Store.create({foobars: [
  {id: "1", foo:"test"}, // note omitting type here
  {id: "2", bar: 200}   // and here
]})

store.foobars.map(({type}) => type)
// (2) ['foo', 'bar']

⬆️ some how it something automatically inferred type 💫
How does this magic work?

---

Finally we can add an isFoo type guard and derive foos:

interface IFoo extends Instance<typeof Foo> {}

const isFoo = (foobar: FooBar): foobar is IFoo => foobar.type === "foo";

const Store = types
  .model({foobars: array(FooBar)})
  .views((self) => ({
    get foos() { return self.foobars.filter(isFoo) }
}))

Now we have:

  const strs = store.foos.map(({foo}) => foo) 

... strs is correctly identified as string[]

And:

store.foos.map(({bar}) => bar)

Correctly gives Property 'bar' does not exist on type 'IFoo'. TS2339 🎉

---

Comments / improvements welcome! 🙏🏻

[davetapley]

I edited my original post thus ⬇️, light of #1907

const Foo = types.model({id: types.identifier, foo: types.string, type: "foo"});
const Bar = types.model({id: types.identifier, bar: types.number, type: "bar"});

const Foo = types.model({id: types.identifier, foo: types.string, type: types.literal("foo")});
const Bar = types.model({id: types.identifier, bar: types.number, type: types.literal("bar")});

---

I'm now able to answer my question:

How does this magic work?

By 'guessing' the first model which appears to match the snapshot:

mobx-state-tree/packages/mobx-state-tree/src/types/utility-types/union.ts

Lines 108 to 110 in cf36cfe

	return this._types
	.filter((t) => t !== reconcileCurrentType)
	.find((type) => type.is(value))

And as I show on #1907 this will not work if the types differ only by array properties.

[coolsoftwaretyler]

Hey @davetapley - thank you for the excellent work digging through the code on this one. I'm going to mark this as the "answer" since you've answered your own question here, and I'll follow up in #1907 about next steps.