如何正確使用命名空間Typescript與Wepback

Question

我正在使用webpack開發一個新項目。這是我第一次嘗試使用這個工具。

自1年以來，我用typescript（for angularJS 1.5）開發，我從來沒有遇到任何與我的命名空間有關的問題。

// src/App/Core/Http/Test.ts 
export namespace App.Core.Http { 
     export class Test { 
      public attr:any; 
     } 
} 

// src/App/Bootstrap.ts 
import { App } from "./Core/Http/Test"; 
let testInstance = new App.Core.Http.Test(); 

如果我有更多文件要導入，該怎麼辦？ 我無法導入多個「應用」變量，每次處理導入時我都不想導入別名。

是這樣的話，我不想，我想解決：

// src/App/Bootstrap.ts 
import { App } from "./Core/Http/Test"; 
import { App as App2 } from "./Core/Http/Test2"; // How can I import properly my namespace 
let testInstance = new App.Core.Http.Test(), 
    test2Instance = new App2.Core.Http.Test2(); 

我錯了的東西還是我惹一些有關的WebPack？ 如何使用webpack與PHP一樣使用命名空間？

編輯2016/22/07於下午六時26分

我才知道，這是不可能使用的WebPack使用的命名空間。爲什麼？因爲每個.ts文件都被視爲具有其自己範圍的模塊。

模塊開發是必需的。

我發現了一個解決方案，使用模塊而不是命名空間來使我的文件調用更加清晰。

在我的情況下，我有App/Core包含Http，Service，Factory，Provider ...文件夾。在Core文件夾的根目錄下，我創建了一個index.ts文件，該文件用模塊體系結構導出所有需要的文件。讓我們來看看。

// src/App/Core/index.ts 
export module Http { 
     export { Test } from "src/App/Core/Http/Test"; 
     export { Test2 } from "src/App/Core/Http/Test2"; 
     export { Test3 } from "src/App/Core/Http/Test3"; 
} 

export module Service { 
     export { ServiceTest } from "src/App/Core/Service/ServiceTest"; 
     export { ServiceTest2 } from "src/App/Core/Service/ServiceTest2"; 
     export { ServiceTest3 } from "src/App/Core/Service/ServiceTest3"; 
} 
//src/App/Core/index.ts ----> EOF 

而在另一個文件調用導入模塊與別名核心。

// src/App/Bootstrap.ts 
import { * as Core } from "./Core"; 

let TestInstance = new Core.Http.Test(), 
    Test2Instance = new Core.Http.Test2(), 
    TestInstance = new Core.Http.Test3(); 

let ServiceTestInstance = new Core.Service.Test(), 
    ServiceTest2Instance = new Core.Service.Test2(), 
    ServiceTestInstance = new Core.Service.Test3(); 

// src/App/Bootstrap.ts ----> EOF 

Answer 1

我瞭解到無法使用webpack使用名稱空間。爲什麼？因爲每個.ts文件都被視爲具有其自己範圍的模塊。

模塊開發是必需的。

我發現了一個解決方案，使用模塊而不是命名空間來使我的文件調用更加清晰。

在我的情況下，我有App/Core包含Http，Service，Factory，Provider ...文件夾。在Core文件夾的根目錄下，我創建了一個index.ts文件，該文件用模塊體系結構導出所有需要的文件。

看看我的帖子我更新了它。

Answer 2

你不應該使用的命名空間和模塊在同一時間，即使你不使用的WebPack你有同樣的問題

與模塊正常的做法是乾脆直接導出類：

// src/App/Core/Http/Test.ts 
export class Test { 
    public attr:any; 
} 

// src/App/Bootstrap.ts 
import { Test } from "./Core/Http/Test"; 
let testInstance = new Test(); 

其他例子：

// src/App/Bootstrap.ts 
import { Test} from "./Core/Http/Test"; 
import { Test2 } from "./Core/Http/Test2"; 
let testInstance = new Test(), 
    test2Instance = new Test2(); 

希望這幫助:)

Answer 3

在TypeScript中，您可以使用另一種導入語句別名命名空間。這很簡單。

import { App } from "./Core/Http/Test"; 
import Test = App.Core.Http.Test; 
import { App as App2 } from "./Core/Http/Test2"; 
import Test2 = App2.Core.Http.Test2; 

在運行時，這是不超過const Test2 = App2.Core.Http.Test2;但在編譯時不同，使用import聲明帶來了所有類型的信息，太。