Bidirectional references and typing

[cstranex]

I have two models that reference each other:

// ./modelA.ts
import {types, IModelType} from 'mobx-state-tree';
import { IMod, Mod } from './modelA';

const NormalNode = types.model({
    test: types.string
})

type NormalNodeType = typeof NormalNode.Type;

export interface INode extends NormalNodeType {
   child?: IMod | null
}

export const Node: IModelType<Partial<INode>, INode> = types.compose(types.model({
   child: types.maybe(types.reference(types.late(() => Mod))),
   example: types.string
}), NormalNode);

// ./modelB.ts
import {types, IModelType} from 'mobx-state-tree';
import { INode, Node } from './modelA';

const NormalMod = types.model({
    name: types.string
})
type NormalModType = typeof NormalMod.Type;

export interface IMod extends NormalModType {
    node?: INode | null;
}

export const Mod: IModelType<Partial<IMod>, IMod> = types.compose(types.model({
    node: types.maybe(types.reference(types.late(() => Node))),
}), NormalMod).actions(
    self => ({
        createSomeName: () => {
            self.name = 'test';
        }
    })
);

// ./index.ts
import { Node } from './modelA';

const store = Node.create();
store.test // available
store.child // available
store.example // not found

I have followed the example of #417 and explicitly defined interfaces for the references however in that example you have to explicitly type your entire model (ie: the example property is not available in Node). Is there another alternative besides defining a model with references and one without and composing them together as in above?

[mweststrate]

I tried, but TypeScript really doesn't seem to be able to make sense of stuff anymore as soon as the type definitoins become bidirectional :-(.

[aksonov]

Maybe we should ask Typescript authors to improve that? If types.late breaks 'automatic' typing of whole model then we have to use/create some other way...

[aksonov]

UPDT: Just found nice workaround here - set any as return type for types.late (maybe you could do it as default option) - this way all typings will be preserved except 'recursive' fields

[xaviergonz]

That's actually on the docs :)

https://github.com/mobxjs/mobx-state-tree#handle-circular-dependencies-between-files-and-types-using-late

[aksonov]

Docs have not ‘any’, but IAnyModelType (with typo), and TS complains that Node is not IAnyModelType instance. ‘any' works much better.

[xaviergonz]

will change the docs to any then, thanks!

[xaviergonz]

Btw, the same trick can be done for bidirectional refs (only needs to be done in one of the sides though)

[aksonov]

@xaviergonz My fault, IAnyModelType also works, I just tried to use types.late around types.reference (and that is incorrect). Now I use types.reference(types.late(..)) and `IAnyModelType works well

[xaviergonz]

changed back :)