Writing a function in typescript that extends a model?

[cmdcolin]

we have a couple models and want to extend the functionality of them consistently

is there a way to do this in typescript nicely?

if I use something like this

function extendModel(model:any) {
   return model.extend(() => {
    return {
      actions: {
        doThing() {}
      },
    }
  })
}

const model = types.model({ mymodel: types.string })
extendModel(model)

this works, and can extend a model, but by using any I lose all typing. can I retain the typing of the inputted model? I tried using e.g.

function extendModel<T extends IAnyModelType>(model:T) 

but it doesn't like this, and probably is still giving any types returned on some level

Type 'IModelType<any, any, any, any>' is not assignable to type 'T'.
     'IModelType<any, any, any, any>' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint 'IAnyModelType'.

any nice way to do this?

[vvitto]

Not very pretty, but here is how we do it

function extend<PROPS extends ModelProperties, OTHERS>(
    model: IModelType<PROPS, OTHERS>,
): IModelType<
    PROPS,
    OTHERS & {
        save(filter: SnapshotIn<IModelType<PROPS, OTHERS>>): void;
        readonly values: ModelSnapshotType<PROPS>;
    }
> {
    const newModel = types
        .model('newModel')
        .actions((self) => ({
            save(filter: SnapshotIn<IModelType<PROPS, OTHERS>>): void {
                applySnapshot(self, filter);
            },
        }))
        .views((self) => ({
            get values(): SnapshotIn<IModelType<PROPS, OTHERS>> {
                return getSnapshot(self) as SnapshotOut<typeof model>;
            },
        }));

    return types.compose(newModel, model);
}

[cmdcolin]

awesome, thanks for posting! I forgot to update this after asking but my coworker came up with I think a similar solution, and put the extra getters and setters in a separate function to help with inferring the return type

import { IModelType, ModelProperties } from 'mobx-state-tree'


function makeExtension() {
  return {
    views: {
      get thing() {
        return 'hello'
      },
    },
    actions: {
      notify() {
        console.log('do thing')
      },
    },
  }
}

export default function addToModel<
  PROPS extends ModelProperties,
  OTHERS,
>(
  tree: IModelType<PROPS, OTHERS>,
): IModelType<
  PROPS,
  OTHERS &
    ReturnType<typeof makeExtension>['actions'] &
    ReturnType<typeof makeExtension>['views']
> {
  return tree.extend(() => {
    return makeExtension() // this is a helper function and using ReturnType<typeof makeExtension> helps with the type inference seen above
  })
}