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

<小时/>

上述解决方案应该有效，但循环依赖仍然是一种反模式。由于您正在重写代码库，因此最好重构该部分。我建议使用某种依赖注入(inject)模式。

文件依赖项

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({});
  };
}

文件索引

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 })