Как сделать перекрестный импорт классов TypeScript?

Question

Я пытаюсь переписать код JavaScript в TypeScript, но у меня возникают некоторые проблемы при попытке импортировать класс в другой файл TypeScript.

Раньше это делалось с пространствами имен jQuery, где это работалонормально.

Моя ситуация такова:

Расположение файлов:

import { Commands } from './funnel.commands'
var commands = new Commands(); /*<--- problematic line*/

export class Layouts {

    loadHtmlSubLayout(done: Function, layoutname: string): void {
    /*...*/
        commands.CloseSubLayout();
    /*...*/
    };

    closeSubLayout(layoutContent): void {
    /*...*/
    };


}

Файл Команды:

import { Layouts } from './funnel.layouts'
var layouts = new Layouts();

export class Commands {

    GotoLayout(el, cmd: CommandObj): void {
       /*...*/
        layouts.loadSpecificLayout(layouts.onLayoutSwitched, layoutName);
    };
    CloseSubLayout(): void {
    /*...*/
        if ($subLayoutContent.length !== 0) {
          layouts.closeSubLayout($subLayoutContent);
        }
    };
}

Всякий раз, когда я пытаюсь запустить это, яполучить ошибку «Команды не являются конструкторами».Как я могу убедиться, что это работает без необходимости перемещать методы?

Answer 1

Один из этих двух модулей должен откатиться и использовать async / lazy init другой, чтобы разорвать круговую цепочку импорта.

В вашем примере я предполагаю, что Commands используется перед Layouts. Таким образом, вы можете сделать следующее:

файл funnel.commands

import { Layouts } from './funnel.layouts'
var layouts = new Layouts

export class Commands {
  CloseSubLayout(): void {
    layouts.closeSubLayout({});
  };
}

файл funnel.layouts

import { Commands } from './funnel.commands'
var commands: Commands
setTimeout(() => {
  commands = new Commands()
})

export class Layouts {
  loadHtmlSubLayout(): void {
    commands.CloseSubLayout();
  };

  closeSubLayout(layoutContent): void {
    console.log('You just called Layouts.closeSubLayout()')
  };
}

другая сторона:

import { Commands } from './funnel.commands'

var commands = new Commands()

commands.CloseSubLayout()

---

Вышеупомянутое решение должно работать, но циклическая зависимость все еще является анти-паттерном. Поскольку вы переписываете кодовую базу, лучше рефакторинг этой части. Я предлагаю использовать какой-нибудь шаблон внедрения зависимостей.

файл dependencies

export const dependencies: any = {
  _register(map: any) {
    Object.assign(this, map)
  }
}

файл funnel.commands

import { dependencies as dep } from './dependencies'

export class Commands {
  CloseSubLayout(): void {
    dep.layouts.closeSubLayout({});
  };
}

файл index

import { Commands } from './funnel.commands'
import { Layouts } from './funnel.layouts'
import { dependencies } from './dependencies'

var commands = new Commands()
var layouts = new Layouts()
dependencies._register({ commands, layouts })