嵌套模块typescript中的导入类

Question

我正在尝试用webpack创建混合角1 +角2 我有嵌套模块的问题

// a.ts

module a.b.c {
   export class A {
  }
}

// b.ts

 module a.b.c {
   export class B extends A {
  }
}

代码编译，但我得到的A是未定义的 我尝试了各种方式的导入，但似乎没有任何工作 我做错了什么？

Answer 1

您需要在b.ts。

中添加对a.ts的引用

所以，只需编辑你的b.ts如下：

/// <reference path="./a.ts" />
  module a.b.c {
   export class B extends A {
     public second;
  }
}

此外，您需要在html文件中包含b.ts之前的a.ts：

<script src="./a.js"></script>
<script src="./b.js"></script>

否则，您将收到错误。

Answer 2

这就是以前的工作方式，但是现在当我们添加webpack时，我读到使用引用不是最佳实践，而webpack没有编译它。

如果我只是删除模块，那就没有问题了。但就像你说这是一个包含大量内部模块的遗留代码。 如果没有这样做的好方法，最好的做法是删除模块，而不是我们可能会这样做。

Answer 3

好的，所以我首先再说一遍，确实没有什么好办法用webpack做这个，除非这是一个庞大的项目，转移到外部模块是可行的。

如果您的大多数文件都是这样的：

// a.ts

module a.b.c {
  export class A {}
}

// b.ts

module d.e.f {
  export class B extends a.b.c.A
}

比起它相对容易，你只需：

// a.ts

export module a.b.c {
  export class A {}
}

// b.ts

import {a} from './a';
module d.e.f {
  export class B extends a.b.c.A
}

但是，在您给出的示例中，您有两个文件组成相同的名称空间\内部模块 - a.b.c。这很难处理，你需要做一些丑陋的事情，如：

// b.ts

import {aImported} from './a';
module a.b.c {
  export class B extends aImported.b.c.A
}

在此解决方案中，您的文件是外部模块，并导出内部模块。

还有一种不同的方法，即将所有旧代码编译，然后使用Gulp \ Grunt编译+连接旧学校，然后将生成的js文件传递给webpack。我过去这样做了，后悔了，后来又离开了。但它确实需要对代码进行最少量的更改，这是它的主要好处。总的来说，我认为它比以前的解决方案更糟糕......