Typescript Circular properties causing typed Any

[sethdumaguin]

Hi!

I am trying to develop some type of Folder structures where I defined these three entities:

File: the files in a folder,
FolderItem: the items that can be in a folder, which is a union of File and Folder since a folder can have both.
Folder: a folder that holds FolderItem.

The problem that I am seeing is the circular dependency here is causing Folder and FolderItem to be typed as any. I was wondering if there's a way to go around this. Here is a codesandbox link: https://codesandbox.io/s/little-monad-oim34o?file=/src/Folder.ts.

I appreciate the help!

[EmilTholin]

Hi @sethdumaguin!

I don't see an obvious solution in your example, but this part of the documentation and this neat trick by kresli might give some inspiration.

import { IAnyModelType, Instance, types } from "mobx-state-tree";

const Node = types
  .model({
    x: 5,
    me: types.maybe(types.late((): IAnyModelType => Node))
  })
  .views((self) => ({
    getMe() {
      return self.me as Instance<typeof self> | undefined;
    }
  }));

const node = Node.create({
  x: 5,
  me: {
    x: 4
  }
});
const me = node.getMe();

// Works!
me?.x
// Property 'y' does not exist on type...
me?.y