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

/*
 * UpgradePackges store
 *
 */

import { types as t, getParent } from 'mobx-state-tree'
// import R from 'ramda'

import { markStates, buildLog } from '@utils'

/* eslint-disable-next-line */
const log = buildLog('S:UpgradePackges')

const UpgradePackges = t
  .model('UpgradePackges', {
    show: t.optional(t.boolean, false),
  })
  .views(self => ({
    get isLogin() {
      return self.root.account.isLogin
    },
    get root() {
      return getParent(self)
    },
  }))
  .actions(self => ({
    authWarning(options) {
      self.root.authWarning(options)
    },
    cashierHelper(opt) {
      self.root.cashierHelper(opt)
    },

.model({
    // domain stores
    account: t.optional(AccountStore, {}),
    route: t.optional(RouteStore, {}),
    viewing: t.optional(ViewingStore, {}),
    comments: t.optional(CommentsStore, {}),
    theme: t.optional(ThemeStore, ThemeDefaults),
    appLocale: t.optional(t.enumeration('locale', ['zh', 'en']), 'zh'),
    appLangs: t.map(t.frozen),
    // domain end

    // toolbox
    sidebar: t.optional(SidebarStore, { menuItems: [] }),
    preview: t.optional(PreviewStore, { visible: false }),
    doraemon: t.optional(DoraemonStore, {}),
    jobEditor: t.optional(JobEditorStore, {}),
    postEditor: t.optional(PostEditorStore, {}),
    videoEditor: t.optional(VideoEditorStore, {}),
    repoEditor: t.optional(RepoEditorStore, {}),
    accountEditor: t.optional(AccountEditorStore, {}),
    upgradePackges: t.optional(UpgradePackgesStore, {}),
    mailBox: t.optional(MailBoxStore, {}),
    labeler: t.optional(LabelerStore, {}),
    docUploader: t.optional(DocUploaderStore, {}),
    avatarAdder: t.optional(AvatarAdderStore, {}),
    // toolbox end

    // layouts > xxx > papers
    // layouts
    globalLayout: t.optional(GlobalLayoutStore, {}),
    header: t.optional(HeaderStore, {}),
    content: t.optional(ContentStore, {}),

// import PlModel from './PlModel'

// import FrameworkModel from './FrameworkModel'
// / import DatabaseModel from './DatabaseModel'
// import CheatSheetModal from './CheatSheetModal'

/* eslint-disable no-unused-vars */
const debug = makeDebugger('S:communities')
/* eslint-enable no-unused-vars */
// const debug = makeDebugger('S:CommunitiesStore')

const CommunitiesStore = t
  .model('CommunitiesStore', {
    entries: t.optional(t.array(Community), []),
    pageNumber: t.optional(t.number, 1),
    pageSize: t.optional(t.number, 20), // TODO: USE CONSTANTS
    totalCount: t.optional(t.number, 0),
    totalPages: t.optional(t.number, 0),

    // filter: {catalogry ... }

    // id: t.identifier(),
    // languages: t.map(PlModel),
    // frameworks: t.map(FrameworkModel),
    // databases: t.map(DatabaseModel),
    // cheatsheet: t.optional(CheatSheetModal, { title: '', desc: '', raw: '' }),
    // jobs: ...
    // themes: ...
    // debug: ...
    // user: ...
    // cmds: t.map(CmdModel),

author: t.optional(User, {}),
})

const CommentBase = {
  id: t.maybeNull(t.string),
  body: t.maybeNull(t.string),
  author: t.optional(User, {}),
  floor: t.number,
  replyTo: t.maybeNull(CommentBrief),
  replies: t.optional(t.array(CommentBrief), []),
  repliesCount: t.optional(t.number, 0),
  likesCount: t.optional(t.number, 0),
  dislikesCount: t.optional(t.number, 0),
  viewerHasLiked: t.maybeNull(t.boolean),
  viewerHasDisliked: t.maybeNull(t.boolean),
  insertedAt: t.optional(t.string, ''),
  updatedAt: t.optional(t.string, ''),
}

export const Comment = t.model('Comment', {
  ...CommentBase,
})

export const PagedComments = t.model('PagedComments', {
  entries: t.optional(t.array(Comment), []),
  pageNumber: t.optional(t.number, 1),
  pageSize: t.optional(t.number, PAGE_SIZE.D),
  totalCount: t.optional(t.number, 0),
  totalPages: t.optional(t.number, 0),
})

// paged post comemnts

return Buffer.concat([data, buffer]);
  } catch (error) {
    console.error(error);
  }
};

export const AugescoStore = types
  .model({
    account: types.optional(types.string, ""),
    balance: types.string,
    network: types.number,
    status: types.enumeration(web3Contexts),
    web3: types.optional(types.frozen()),
    web3_ws: types.optional(types.frozen()),
    ipfs: types.optional(types.frozen()),
    witness: types.optional(types.frozen(), {}),
    contracts: types.map(contractInstance),
    transactions: types.map(transactionInstance),
    loaded: false,
  })
  .actions(self => ({
    add(
      _id,
      _abi,
      _txHash,
      _address,
      _contract,
      _methods,
      _eventContract,
      _events
    ) {
      self.contracts.set(_id, {

import _ from "lodash"
import { types, getParent } from "mobx-state-tree"

import Track, { parse as parseTrack } from "store/track"

export default types
  .model("Album", {
    id: types.identifier,
    title: types.string,
    artistName: types.string,
    year: types.maybeNull(types.number),
    userRating: types.optional(types.number, 0),
    addedAt: types.number,
    playCount: types.optional(types.number, 0),
    thumb: types.maybeNull(types.string),
    tag: types.array(types.string),
    genres: types.array(types.string),
    studio: types.maybeNull(types.string),

    tracks: types.optional(types.array(Track), []),
  })
  .views((self) => ({
    get section() {
      return getParent(self, 2)
    },
    get device() {
      return getParent(self.section, 2)
    },

period: { from: string, to: string };

  readonly chartData: { label: string, value: number}[];
  readonly weekOverWeekData: { label: string, value: number}[];
  readonly byStateData: { label: string, value: number}[];
  get: () => Promise<{}>;
}

export const DashboardStoreModel = types
  .model('DashboardStore', {
    loading: types.optional(types.boolean, false),

    chart: types.optional(types.map(ChartModel), {}),
    weekOverWeek: types.optional(types.map(WeekOverWeekModel), {}),
    byState: types.optional(types.map(ByStateModel), {}),

    period: types.maybe(types.model({
      from: types.string,
      to: types.string
    })),
  })
  .views(self => ({
    get chartData() {
      return sort(Array.from(self.chart.values()), 'label', 'desc').map(x => {
        const date = DateTime.fromISO(x.label);

        return {
          label: date.toFormat('MMM d'),
          value: x.value / 100
        };
      });

import React from "react";

import { observer } from "mobx-react";
import { types, getParent, getRoot } from "mobx-state-tree";

import Konva from "konva";
import { Rect, Circle } from "react-konva";

const PolygonPoint = types
  .model({
    relativeX: types.optional(types.number, 0),
    relativeY: types.optional(types.number, 0),

    init_x: types.optional(types.number, 0),
    init_y: types.optional(types.number, 0),

    x: types.number,
    y: types.number,

    index: types.number,

    style: types.string,
    size: types.string,
    isMouseOverStartPoint: types.optional(types.boolean, false),
  })
  .views(self => ({
    get parent() {
      return getParent(self, 2);
    },

    get completion() {

*     <label value="Nose"></label>
 *   
 *   <img value="$img" name="img-1">
 * 
 * @name KeyPointLabels
 * @param {string} name name of the element
 * @param {string} toname name of the image to label
 * @param {float=} [opacity=0.9] opacity of keypoint
 * @param {string=} fillColor keypoint fill color, default is transparent
 * @param {number=} [strokeWidth=1] width of the stroke
 */
const TagAttrs = types.model({
  name: types.maybeNull(types.string),
  toname: types.maybeNull(types.string),

  opacity: types.optional(types.string, "0.9"),
  fillcolor: types.maybeNull(types.string),

  strokewidth: types.optional(types.string, "1"),
});

const Model = types
  .model("KeyPointLabelesModel", {
    id: types.identifier,
    pid: types.optional(types.string, guidGenerator),
    type: "keypointlabels",
    children: Types.unionArray(["labels", "label", "choice"]),
  })
  .views(self =&gt; ({
    get hasStates() {
      const states = self.states();
      return states &amp;&amp; states.length &gt; 0;

}
      });
    },

    delete() {
      dbd.get(self._id).then(doc => {
        dbd.remove(doc);
      });
      getRoot(self).delete(self);
    },
  }));

const Store = types
  .model("PrinterStore", {
    rows: types.optional(types.array(Printer), []),
    companySettings: types.optional(types.array(Company), []),
    bluetooth: types.optional(types.array(BluetoothScanner), []),
    sync: types.optional(types.array(SyncInfo), []),
    foundDevices: types.optional(types.string, "[]"),
    defaultPrinter: types.optional(types.string, ""),
  })
  .actions(self => ({
    add(value) {
      self.rows.push(value);
    },
    addCompany(value) {
      self.companySettings.push(value);
    },
    addBluetoothScannerStatus(value) {
      self.bluetooth.push({
        _id: value._id,
        status: value.status,