How to use the mobx-state-tree.types.union function in mobx-state-tree

import RegionsMixin from "../mixins/Regions";
import NormalizationMixin from "../mixins/Normalization";
import Hint from "../../components/Hint/Hint";
import Utils from "../../utils";

import styles from "./TextRegion/TextRegion.module.scss";

const Model = types
  .model("TextRegionModel", {
    id: types.optional(types.identifier, guidGenerator),
    pid: types.optional(types.string, guidGenerator),
    type: "textrange",
    start: types.integer,
    end: types.integer,
    text: types.string,
    states: types.maybeNull(types.array(types.union(LabelsModel, RatingModel))),
  })
  .views(self => ({
    get parent() {
      return getParentOfType(self, TextModel);
    },

    get completion() {
      return getRoot(self).completionStore.selected;
    },
  }))
  .actions(self => ({
    // highlightStates() {},

    /**
     *
     */

isResizing: types.boolean,
  changedModuleShortids: types.array(types.string),
  pendingOperations: types.map(
    types.array(types.union(types.string, types.number))
  ),
  pendingUserSelections: types.array(
    types.model({
      userId: types.string,
      name: types.maybeNull(types.string),
      selection: types.maybeNull(UserSelection),
      color: types.maybeNull(types.array(types.number)),
    })
  ),
  currentTabId: types.maybeNull(types.string),
  tabs: types.array(
    types.union(
      types.model({
        type: types.literal('MODULE'),
        moduleShortid: types.string,
        dirty: types.boolean,
      }),
      types.model({
        id: types.string,
        type: types.literal('DIFF'),
        titleA: types.string,
        titleB: types.string,
        codeA: types.string,
        codeB: types.string,
        fileTitle: types.maybeNull(types.string),
      })
    )
  ),

import { QueryBuilder } from "mst-gql"
import { ModelBase } from "./ModelBase"
import { RootStoreType } from "./index"


/**
 * UserBase
 * auto generated base class for the model UserModel.
 */
export const UserModelBase = ModelBase
  .named('User')
  .props({
    __typename: types.optional(types.literal("User"), "User"),
    id: types.identifier,
    name: types.union(types.undefined, types.string),
    avatar: types.union(types.undefined, types.string),
  })
  .views(self => ({
    get store() {
      return self.__getStore()
    }
  }))

self.data = self.pristine;
    }
  }));

export type IItem = typeof Item.Type;
export type SItem = SnapshotIn;

export const ListStore = iRendererStore
  .named('ListStore')
  .props({
    items: types.array(Item),
    selectedItems: types.array(types.reference(Item)),
    primaryField: 'id',
    orderBy: '',
    orderDir: types.optional(
      types.union(types.literal('asc'), types.literal('desc')),
      'asc'
    ),
    draggable: false,
    dragging: false,
    multiple: true,
    selectable: false,
    itemCheckableOn: '',
    itemDraggableOn: '',
    hideCheckToggler: false
  })
  .views(self => {
    function isSelected(item: IItem): boolean {
      return !!~self.selectedItems.indexOf(item);
    }

    function getModifiedItems() {

import { types } from "mobx-state-tree"
import { QueryBuilder } from "mst-gql"
import { ModelBase } from "./ModelBase"
import { RootStoreType } from "./index"


/**
 * UserBase
 * auto generated base class for the model UserModel.
 */
export const UserModelBase = ModelBase
  .named('User')
  .props({
    __typename: types.optional(types.literal("User"), "User"),
    id: types.identifier,
    name: types.union(types.undefined, types.string),
    avatar: types.union(types.undefined, types.string),
  })
  .views(self => ({
    get store() {
      return self.__getStore()
    }
  }))

}

/**
 * MessageBase
 * auto generated base class for the model MessageModel.
 */
export const MessageModelBase = withTypedRefs()(ModelBase
  .named('Message')
  .props({
    __typename: types.optional(types.literal("Message"), "Message"),
    id: types.identifier,
    timestamp: types.union(types.undefined, types.number),
    user: types.union(types.undefined, MSTGQLRef(types.late((): any => UserModel))),
    text: types.union(types.undefined, types.string),
    likes: types.union(types.undefined, types.null, types.array(MSTGQLRef(types.late((): any => UserModel)))),
    replyTo: types.union(types.undefined, types.null, MSTGQLRef(types.late((): any => MessageModel))),
  })
  .views(self => ({
    get store() {
      return self.__getStore()
    }
  })))

name: types.union(types.undefined, types.null, types.string),
    /** The minimum and maximum weight of this Pokémon */
    weight: types.union(types.undefined, types.null, types.late((): any => PokemonDimensionModel)),
    /** The minimum and maximum weight of this Pokémon */
    height: types.union(types.undefined, types.null, types.late((): any => PokemonDimensionModel)),
    /** The classification of this Pokémon */
    classification: types.union(types.undefined, types.null, types.string),
    /** The type(s) of this Pokémon */
    types: types.union(types.undefined, types.null, types.array(types.union(types.null, types.string))),
    /** The type(s) of Pokémons that this Pokémon is resistant to */
    resistant: types.union(types.undefined, types.null, types.array(types.union(types.null, types.string))),
    /** The attacks of this Pokémon */
    attacks: types.union(types.undefined, types.null, types.late((): any => PokemonAttackModel)),
    /** The type(s) of Pokémons that this Pokémon weak to */
    weaknesses: types.union(types.undefined, types.null, types.array(types.union(types.null, types.string))),
    fleeRate: types.union(types.undefined, types.null, types.number),
    /** The maximum CP of this Pokémon */
    maxCP: types.union(types.undefined, types.null, types.integer),
    /** The evolutions of this Pokémon */
    evolutions: types.union(types.undefined, types.null, types.array(types.union(types.null, MSTGQLRef(types.late((): any => PokemonModel))))),
    /** The evolution requirements of this Pokémon */
    evolutionRequirements: types.union(types.undefined, types.null, types.late((): any => PokemonEvolutionRequirementModel)),
    /** The maximum HP of this Pokémon */
    maxHP: types.union(types.undefined, types.null, types.integer),
    image: types.union(types.undefined, types.null, types.string),
  })
  .views(self => ({
    get store() {
      return self.__getStore()
    }
  })))

* auto generated base class for the model PokemonModel.
 *
 * Represents a Pokémon
 */
export const PokemonModelBase = withTypedRefs()(ModelBase
  .named('Pokemon')
  .props({
    __typename: types.optional(types.literal("Pokemon"), "Pokemon"),
    /** The ID of an object */
    id: types.identifier,
    /** The identifier of this Pokémon */
    number: types.union(types.undefined, types.null, types.string),
    /** The name of this Pokémon */
    name: types.union(types.undefined, types.null, types.string),
    /** The minimum and maximum weight of this Pokémon */
    weight: types.union(types.undefined, types.null, types.late((): any => PokemonDimensionModel)),
    /** The minimum and maximum weight of this Pokémon */
    height: types.union(types.undefined, types.null, types.late((): any => PokemonDimensionModel)),
    /** The classification of this Pokémon */
    classification: types.union(types.undefined, types.null, types.string),
    /** The type(s) of this Pokémon */
    types: types.union(types.undefined, types.null, types.array(types.union(types.null, types.string))),
    /** The type(s) of Pokémons that this Pokémon is resistant to */
    resistant: types.union(types.undefined, types.null, types.array(types.union(types.null, types.string))),
    /** The attacks of this Pokémon */
    attacks: types.union(types.undefined, types.null, types.late((): any => PokemonAttackModel)),
    /** The type(s) of Pokémons that this Pokémon weak to */
    weaknesses: types.union(types.undefined, types.null, types.array(types.union(types.null, types.string))),
    fleeRate: types.union(types.undefined, types.null, types.number),
    /** The maximum CP of this Pokémon */
    maxCP: types.union(types.undefined, types.null, types.integer),
    /** The evolutions of this Pokémon */

import { clone, detach, tryReference, types } from 'mobx-state-tree'
import Task from '../../models/Task'
import * as tools from '@plugins/drawingTools/models/tools'
import DrawingAnnotation from './DrawingAnnotation'

const toolModels = Object.values(tools)

const Drawing = types.model('Drawing', {
  activeToolIndex: types.optional(types.number, 0),
  help: types.optional(types.string, ''),
  instruction: types.string,
  tools: types.array(types.union(...toolModels)),
  type: types.literal('drawing')
})
  .views(self => ({
    get activeTool () {
      return self.tools[self.activeToolIndex]
    },

    get defaultAnnotation () {
      return DrawingAnnotation.create({ task: self.taskKey })
    },

    get isComplete () {
      return self.tools.reduce((isTaskComplete, tool) => isTaskComplete && tool.isComplete, true)
    },

    get marks () {

}

/**
 * MessageBase
 * auto generated base class for the model MessageModel.
 */
export const MessageModelBase = withTypedRefs()(ModelBase
  .named('Message')
  .props({
    __typename: types.optional(types.literal("Message"), "Message"),
    id: types.identifier,
    timestamp: types.union(types.undefined, types.number),
    user: types.union(types.undefined, MSTGQLRef(types.late((): any => UserModel))),
    text: types.union(types.undefined, types.string),
    likes: types.union(types.undefined, types.null, types.array(MSTGQLRef(types.late((): any => UserModel)))),
    replyTo: types.union(types.undefined, types.null, MSTGQLRef(types.late((): any => MessageModel))),
  })
  .views(self => ({
    get store() {
      return self.__getStore()
    }
  })))

export class MessageModelSelector extends QueryBuilder {
  get id() { return this.__attr(`id`) }
  get timestamp() { return this.__attr(`timestamp`) }
  get text() { return this.__attr(`text`) }
  user(builder?: string | UserModelSelector | ((selector: UserModelSelector) => UserModelSelector)) { return this.__child(`user`, UserModelSelector, builder) }
  likes(builder?: string | UserModelSelector | ((selector: UserModelSelector) => UserModelSelector)) { return this.__child(`likes`, UserModelSelector, builder) }
  replyTo(builder?: string | MessageModelSelector | ((selector: MessageModelSelector) => MessageModelSelector)) { return this.__child(`replyTo`, MessageModelSelector, builder) }
}
export function selectFromMessage() {