使用 MobX 存储的 TypeScript 递归引用

Question

我有一个 TypeScript 递归引用问题。我花了两天时间试图解决这个问题，真的需要一些帮助。

我使用 MobX，我有一个父商店和两个子商店。下面是我的设置的概述。请注意我如何将父商店传递给子商店。 (Example App)

// ChartWidget.store.ts
const ChartWidgetStore = (dashboardPageStore: IDashboardPageStore) => observable({ /*...*/ });

// TableWidget.store.ts
const TableWidgetStore = (dashboardPageStore: IDashboardPageStore) => observable({ /*...*/ });

// DashboardPageStore.store.ts
export const DashboardPageStore = () => {
  const store = observable({
    chartWidgetStore = null,
    tableWidgetStore = null,
  });

  store.chartWidgetStore = ChartWidgetStore(store);
  store.tableWidgetStore = TableWidgetStore(store);

  return store;
};

export interface IDashboardPageStore extends ReturnType<typeof DashboardPageStore> {}

如果我给子/小部件商店一个类型：

chartWidgetStore: null as IChartWidgetStore,
tableWidgetStore: null as ITableWidgetStore,

我收到错误：Type 'IDashboardPageStore' recursively references itself as a base type.(2310)，我的所有类型都变为any。我认为它们变成了any，因为ReturnType 类型与递归引用混淆了。

这是Example App

Answer 1

• IChartWidgetStore 用于DashboardPageStore 的属性
• DashboardPageStore 用于派生IDashboardPageStore 的类型
• IDashboardPageStore 用于输入ChartWidgetStore 的参数
• ChartWidgetStore 用于派生IChartWidgetStore 类型......现在我们已经绕了一圈。

如果孩子依赖父母，那么父母就不能依赖孩子，反之亦然。