Self reference model with Typescript and MST v3

[AndrewSorokin]

I have some issue with explicit model typing in v3.

I need to get model with self reference with typescript.
There is solution #417 for MST v2 smth. like that:

interface IModel {
    key: string;
    reference: IModel;

    prop: number;
}

export const Model: IModelType<ISnapshottable<IModel>, IModel> = types.model({
    key: types.identifier,
    reference: types.late(() => Model),

    prop: types.number
})

What is a proper way to express model type with MST v3?

[AndrewSorokin]

The only ugly way I was able to do this is there:

import {
    types, IModelType, IComplexType
} from 'mobx-state-tree';

const ModelProps = {
    key: types.identifier,
    num: types.number,
    ref: types.frozen() as IComplexType<IModel | string | number, string | number, IModel>,
};


interface IModel {
    method: (param: number) => string, 

    key: string,
    num: number,
    ref: IModel,
}


export const Model: IModelType<typeof ModelProps, IModel> = types.model({
            ...ModelProps,
            ref: types.reference(types.late(() => Model))
        })
    .actions(self => ({
        method: (t: number) => { return t.toString(); }
    }))

export const m = Model.create({
    key: '1',
    num: 0,
    ref: '1'
});

[AndrewSorokin]

Another aproach is to manualy resolve references.

Still waiting for comments.

import {
    types, getRoot, resolveIdentifier
} from 'mobx-state-tree';



export const Model = types.model(
        {
            key: types.identifier,
            num: types.number,
            refKey: types.string
        })
        .views(self => ({
            get ref() {
                const root = getRoot(self);
                const ref = resolveIdentifier(Model , root, self.refKey);
                return ref as typeof Model.Type;
            }
        }))
    .actions(self => ({
        method: (t: number) => { 
            return t.toString(); 
        }
    }))

export const m = Model.create({
    key: '1',
    num: 0,
    refKey: '1'
});

[mweststrate]

Could you create a TS based code sandbox so that others can chime in? Op di 24 jul. 2018 09:44 schreef AndrewSorokin <notifications@github.com>:

…

Another aproach is to manualy resolve references. Still waiting for comments. import { types, getRoot, resolveIdentifier } from 'mobx-state-tree'; export const Model = types.model( { key: types.identifier, num: types.number, refKey: types.string }) .views(self => ({ get ref() { const root = getRoot(self); const ref = resolveIdentifier(Model , root, self.refKey); return ref as typeof Model.Type; } })) .actions(self => ({ method: (t: number) => { return t.toString(); } })) export const m = Model.create({ key: '1', num: 0, refKey: '1' }); — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#943 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABvGhL5o3OyaQ52lkvEcjfxsBV8nQsM5ks5uJtBJgaJpZM4Vagl_> .

[AndrewSorokin]

Sure, here is it.

Example with manual reference resolution
https://codesandbox.io/s/20wlz7256j

I don't like that because of redundancy and some extra work I need to do.

Example with explicit typings:
https://codesandbox.io/s/jl5jkywyk3

It looks a bit ugly.
Is there any more elegant way to explicilly define model type with self reference?

[mweststrate]

There seems to be no clean way to fix, as TS really can't handle the type of something self referring. Even upcasting doesn't work. However, using a temporary variable seems to work around it:

let tmp: any

///  BrokenTypingsModel has any type or leads to TS compiler error
const BrokenTypingsModel = types.model({
    key: types.identifier,
    brokenRef: types.maybe(types.reference(types.late<BrokenTypeLike, BrokenTypeLike, BrokenTypeLike>(() => tmp)))
})

interface BrokenTypeLike {
    key: string
    brokenRef: BrokenTypeLike
}
tmp = BrokenTypingsModel

const b = BrokenTypingsModel.create({ key: '3' })
console.log(b.brokenRef ? b.brokenRef.key : 'nothing')

https://codesandbox.io/s/nknnl9zl2m

[bourquep]

Is the problem described here similar to the one described in this issue?

[mweststrate]

@bourquep no that is a different problem, the issue here is like expressing a self-referring structure interface Node { children: Node[] } . However, the issue you are referring to is actions that refer to their own structural type, which we can express because models are built up in parts (and actions can be defined in local closures first) as described here (not ideal, but possible): https://github.com/mobxjs/mobx-state-tree#typing-self-in-actions-and-views)

[mweststrate]

Closing as a can't fix at this moment :-(

[xaviergonz]

actually using 'this' for actions defined in the same scope is also possible (like for views), maybe the readme should be updated with that?

[mweststrate]

Hmm yes that might be outdated indeed Op ma 27 aug. 2018 om 19:47 schreef Javier Gonzalez < notifications@github.com>:

…

actually using 'this' for actions defined in the same scope is also possible (like for views), maybe the readme should be updated with that? — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#943 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABvGhHkJY0gpYYr25zbXKCQnUa4p9SApks5uVDDLgaJpZM4Vagl_> .