在嵌套模塊打字稿中導入類

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
}

但是，在給出的示例中，您有兩個文件組成了相同的namespace \\ internal模塊abc 。 這很難處理，您需要做一些丑陋的事情，例如：

//b.ts

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

在此解決方案中，您的文件是外部模塊，並且它們導出內部模塊。

---

還有一個不同的方法，也就是把所有的舊代碼，並使用咕嘟咕嘟\\咕嚕編譯+ CONCAT它的老同學 ，產生的js文件傳遞給的WebPack之前。 我過去曾經這樣做過，對此我感到遺憾，此后便不再這樣做了。 但這確實需要最少的代碼更改，這是它的主要優點。 總的來說，我認為這比以前的解決方案還要糟糕...