Namespace Typescript richtig mit Wepback verwenden

Question

Ich arbeite an einem neuen Projekt mit Webpack. Dies ist mein erster Versuch mit diesem Tool.

Ich habe mit Typoskript (für angularJS 1.5) seit 1 Jahr entwickelt und hatte nie irgendwelche Probleme mit meinem Namespacing.

// 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(); 

Was ist, wenn ich mehr Datei importieren muss. Ich kann nicht mehr als eine "App" -Variable importieren und möchte nicht jedes Mal Alias ​​erstellen, wenn ich einen Import verarbeite.

Dies ist der Fall will ich nicht, und ich würde beheben mag:

// 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(); 

Bin ich falsch mit etwas oder habe ich etwas über Chaos webpack? Wie kann ich mit Namespace wie in PHP mit Webpack spielen?

EDIT 2016/22/07 um 6:26 Uhr

ich gelernt, dass es nicht möglich ist, Namespace zu verwenden webpack verwenden. Warum ? Weil jede .ts-Datei als ein Modul mit einem eigenen Gültigkeitsbereich betrachtet wird.

Modulentwicklung erforderlich.

Ich habe eine Lösung gefunden, um meinen Dateianruf mit Hilfe des Moduls anstelle des Namensraums klarer zu machen.

In meinem Fall habe ich App/Core, die Http, Service, Factory, Provider ... Ordner enthält. Im Stammverzeichnis des Core-Ordners habe ich eine index.ts-Datei erstellt, die alle meine benötigten Dateien mit Modularchitektur exportiert. Mal schauen.

// 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 

Und in einem anderen Dateiaufruf importieren Sie das Modul mit dem Alias ​​Core.

// 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

Ich habe gelernt, dass es nicht möglich ist, Namespace mit Webpack zu verwenden. Warum ? Weil jede .ts-Datei als ein Modul mit einem eigenen Gültigkeitsbereich betrachtet wird.

Modulentwicklung erforderlich.

Ich habe eine Lösung gefunden, um meinen Dateianruf mit Hilfe des Moduls anstelle des Namensraums klarer zu machen.

In meinem Fall habe ich App/Core, die Http, Service, Factory, Provider ... Ordner enthält. Im Stammverzeichnis des Core-Ordners habe ich eine index.ts-Datei erstellt, die alle meine benötigten Dateien mit Modularchitektur exportiert.

Überprüfen Sie es in meinem Post Ich aktualisierte es.

Answer 2

Sie sollten nicht gleichzeitig mit Namespaces und Module sein, auch wenn Sie nicht webpack verwendet haben würden Sie das gleiche Problem haben

ein normaler Ansatz mit Modulen ist nur direkt die Klasse zu exportieren:

// 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(); 

das andere Beispiel:

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

hoffen, dass diese hilft :)

Answer 3

In TypeScript können Sie Namespaces mit einer anderen Art von Importanweisung Aliasnamen. Es ist ziemlich einfach.

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; 

Zur Laufzeit, das ist nicht anders als const Test2 = App2.Core.Http.Test2; aber zur Compile-Zeit, unter Verwendung eines import Aussage bringt über alle Typinformationen auch.