How to use the mobx.extendObservable function in mobx

const modelToObservable = (app: Cans, model: ICansModel) => {
  let o = extendObservable({})
  if (model.observable) {
    o = typeof model.observable === 'function' ? model.observable(app) : model.observable
  }

  // apply state
  if (model.state) {
    extendObservable(o, model.state)
  }

  // apply actions
  if (model.actions) {
    const actions = typeof model.actions === 'function' ? model.actions(app) : model.actions
    for (let name in actions) {
      extendObservable(o, {
        [name]: action.bound(actions[name] as any)
      })

resetInstanceInfo() {
    extendObservable(this, {
      isShellConnected: false,
      delta: {
        'plug_requests': (new Map()),
        'cowboy_requests': (new Map()),
        'erlang_processes': (new Map()),
        'lager_events': (new Map()),

        // initialize as Map, in order to be able to listen
        // for new item
        'shell_commands': (new Map()),
        'erlang_processes_info': (new Map()),
        'erlang_processes_info_binaries': (new Map()),
      },
      selectedProcessPid: null,
      hoveredProcessPid: null,
      selectedCallbackId: null,

constructor(id, name, nodeType) {
    extendObservable(this, {
      // Unique id of the tracker. This would be generated by the client
      id,

      // Is Mobx or MST node
      nodeType,
      isMobx: computed(() => {
        return this.nodeType === 0;
      }),
      isStateTree: computed(() => {
        return this.nodeType === 1;
      }),
      isObservable: computed(() => {
        return this.isMobx || this.isStateTree;
      }),

      // Name of the tracker. Would be displayed in the dashboard. Provided by the client.

action('Mutate Object', function(x) {
    x.a = 4
    x.b = 5
    x.c = 6
    extendObservable(x, { d: 7 })
  })(obs)
  expect(obs).toEqual({ a: 4, b: 5, c: 6, d: 7 })

constructor() {
        this.switchLocale = this.switchLocale.bind(this)
        extendObservable(this, {
            locale: 'en',
            loading: 'false',
            data: en
        });
    }

addLineItem(id, itemId, measurementId, quantity, amount, discount, code) {
        var newLineItem = new SalesOrderLine(id, itemId, measurementId, quantity, amount, discount, code);
        this.salesOrder.salesOrderLines.push(extendObservable(newLineItem, newLineItem));        
    }

const ComputedTransaction = store => {
  extendObservable(store, {
    get computedTransactions() {
      const { transactions, payments, invoices, settings } = store;
      const t = transactions ? transactions.slice() : [];
      const p = payments ? payments.slice() : [];
      const i = invoices ? invoices.slice() : [];
      const all = [].concat(t, p, i);
      all.sort((a, b) => b.date.getTime() - a.date.getTime());
      all.forEach(t => {
        t.idName = t.type === 'bitcoin' ? 'Transaction ID' : 'Invoice ID';
        t.typeLabel = toCaps(t.type);
        t.statusLabel = toCaps(t.status);
        t.dateLabel = t.date.toLocaleDateString();
        t.dateTimeLabel = t.date.toLocaleString();
        t.amountLabel = toAmountLabel(t.amount, settings);
        t.unitAmountLbl = `${toAmountLabel(t.amount, settings)}${
          store.settings.displayFiat

constructor() {
    extendObservable(this, {
      connectionInfo: {
        port: null,
        app: ""
      },
      saved: {
        snapshots: new Map()
      },
      savedSnapshots: computed(() => {
        return this.saved.snapshots
          .values()
          .filter(
            snapshot =>
              snapshot.trackerName === this.currentTracker.name &&
              snapshot.app === this.app
          )
          .reverse();

constructor() {
                super();
                extendObservable(this, {
                    show: true,
                    speed: 0,
                    timeoutHidden: undefined,
                });
            }
            showHide = action((value, speed) => {