Блог

У меня проблема с рекурсивными ссылками на TypeScript. Я провожу два дня, пытаясь разобраться в этом, и мне действительно нужна помощь.

Я использую MobX, и у меня есть одно родительское хранилище и два дочерних хранилища. Ниже приведен обзор моей настройки. Обратите внимание на то, как я передаю родительское хранилище дочерним хранилищам. (Пример приложения)

 // 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 -за того, что тип путается с рекурсивными ссылками.

Вот пример приложения

• IChartWidgetStore используется для свойства DashboardPageStore
• DashboardPageStore используется для получения типа для IDashboardPageStore
• IDashboardPageStore используется для ввода аргумента ChartWidgetStore
• ChartWidgetStore используется для получения типа IChartWidgetStore … и теперь мы прошли полный круг.

Если дочерние элементы зависят от родителей, то родители не могут зависеть от дочерних элементов, и наоборот.