Using references with runtime type checking

[mvladic]

Here is an example from the documentation of how to use references:

import {
    Model,
    findParent,
    model,
    detach,
    customRef,
    prop,
    Ref,
} from "mobx-keystone";

export const todoRef = customRef<Todo>("myApp/TodoRef", {
    resolve(ref) {
        const todoList = findParent<TodoList>(
            ref,
            (n) => n instanceof TodoList
        );
        if (!todoList) return undefined;
        return todoList.list.find((todo) => todo.id === ref.id);
    },

    onResolvedValueChange(ref, newTodo, oldTodo) {
        if (oldTodo && !newTodo) {
            detach(ref);
        }
    },
});

@model("myApp/Todo")
class Todo extends Model({
    id: prop<string>(),
}) {
    // ...
}

@model("myApp/TodoList")
class TodoList extends Model({
    list: prop<Todo[]>(() => []),
    selectedRef: prop<Ref<Todo> | undefined>(),
}) {
    // ...
}

If I want to enable runtime type checking like this:

import {
    Model,
    findParent,
    model,
    detach,
    customRef,
    tProp,
    types,
} from "mobx-keystone";

export const todoRef = customRef<Todo>("myApp/TodoRef", {
    resolve(ref) {
        const todoList = findParent<TodoList>(
            ref,
            (n) => n instanceof TodoList
        );
        if (!todoList) return undefined;
        return todoList.list.find((todo) => todo.id === ref.id);
    },

    onResolvedValueChange(ref, newTodo, oldTodo) {
        if (oldTodo && !newTodo) {
            detach(ref);
        }
    },
});

@model("myApp/Todo")
class Todo extends Model({
    id: tProp(types.string), // use tProp instead of prop
}) {
    // ...
}

@model("myApp/TodoList")
class TodoList extends Model({
    list: tProp(types.array(types.model(Todo)), () => []), // use tProp instead of prop
    selectedRef: tProp(types.ref(todoRef)), // use tProp instead of prop
}) {
    // ...
}

I'm getting following typescript errors:

Do you have any idea how to resolve this issue?

[xaviergonz]

That's because there's a cyclic dependency between the TodoList type and the todoRef type

  // add the return type here to fix the dependency
  resolve(ref): Todo | undefined {
    const todoList = findParent<TodoList>(
      ref,
      // add this to disable the eslint warning
      // eslint-disable-next-line @typescript-eslint/no-use-before-define
      (n) => n instanceof TodoList
    );
    if (!todoList) return undefined;
    return todoList.list.find((todo: Todo) => todo.id === ref.id);
  },

[mvladic]

Thanks, I added an explicit type annotation for todoRef which solved the problem:

const todoRef: RefConstructor<Todo> = customRef<Todo>("myApp/TodoRef", {
    // ...
});