如何交叉导入 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

这两个模块中的一个必须回退并使用异步/延迟初始化另一个以中断循环导入链。

在您的示例中，我假设 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 })