Question

我正在使用webpack开发一个新项目。这是我第一次使用这个工具。

我从1年开始使用打字稿（对于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();

如果我要导入更多文件怎么办？我无法导入多个应用程序＆＃34;变量，我不想在每次处理导入时都使用别名。

这是我不想要的情况，我想解决：

// 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的问题？我如何在PHP中使用webpack来使用命名空间？

编辑2016/22/07 at 6: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

在另一个文件调用中，使用别名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

您不应该同时使用命名空间和模块，即使您没有使用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 2

我了解到使用webpack不可能使用命名空间。为什么？因为每个.ts文件都被视为具有自己范围的模块。

需要开发模块。

我找到了一个解决方案，可以使用模块而不是命名空间来清除文件调用。

在我的情况下，我有App / Core，其中包含Http，Service，Factory，Provider ...文件夹。在Core文件夹的根目录下，我创建了一个index.ts文件，该文件使用模块体系结构导出所有需要的文件。

在我的帖子中查看我更新了它。

Answer 3

在TypeScript中，您可以使用另一种import语句为名称空间添加别名。这很简单。

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语句也会带来所有类型信息。

如何在Webpack中正确使用Namespace Typescript

3 个答案: