How to use Namespace Typescript properly with Webpack

Question

I am working on a new project with webpack. This is my first try with this tool.

I used to develop with typescript (for angularJS 1.5) since 1 year and I never had any problems relating to my 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();

What if I have more file to import. I can't import more than one "App" variable and I don't want to make alias each time I'm processing an import.

This is the case I don't want and I would like to fix :

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

Am I wrong with something or did I mess something about webpack ? How can I play with namespace like in PHP with webpack ?

EDIT 2016/22/07 at 6:26 PM

I learnt that it is not possible to use namespace using webpack. Why ? Because each .ts file are considered as a module with its own scope.

Module developement is required.

I've found a solution to get my file call clearer using module instead of namespace.

In my case, I have App/Core which contains Http, Service, Factory, Provider... folders. At the root of Core folder I created a index.ts file which export all my needed files with module architecture. Let's see.

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

And in another file call import the module with the 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

In your example you exported classes within a module, which will result in a "TS1194: Export declarations are not permitted in a namespace" error, how did you handle it? — hillin
– hillin, Commented Mar 1, 2017 at 3:28

doppelgreener · Accepted Answer · 2019-12-11 14:58:22Z

I learnt that it is not possible to use namespace using webpack. Why ? Because each .ts file are considered as a module with its own scope.

Module developement is required.

I've found a solution to get my file call clearer using module instead of namespace.

In my case, I have App/Core which contains Http, Service, Factory, Provider... folders. At the root of Core folder I created a index.ts file which export all my needed files with module architecture. Let's see.

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

And in another file call import the module with the 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

kruczy · Accepted Answer · 2016-07-22 10:26:31Z

3

You should not be using namespaces and modules at the same time, even if you were not using webpack you would have the same problem

a normal approach with modules is to just export the class directly:

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

the other example:

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

hope this helps :)

answered Jul 22, 2016 at 10:26

kruczy

7914 silver badges8 bronze badges

4 Comments

Disfigure Over a year ago

Thanks for that reply, but I have to use namespacing because it's a huge app. I'm developping the new backoffice of my enterprise. I used to develop a personnal project using Gulp and I made namespace works. Do you have any other approach to make this work ? like create a special module or concat my ts file into only one to make those as a module and import it..

kruczy Over a year ago

if you don't use modules you can use namespaces just fine, but with modules namespaces are not necessary, and in fact will go in your way as each module is in a separate scope so your separate namespace declarations will not get merged together

Disfigure Over a year ago

So my main problem is caused by what ?I don't get it. I found out that is caused by webpack and it's module system. With this way I should have some nomenclature conflict ...

kruczy Over a year ago

you should be using either modules or namespaces, not both. since webpack expects your files to be modules (thats why I imagine you added the imports) you need to remove all the namespace declarations and follow standard module structure, more here: typescriptlang.org/docs/handbook/modules.html

cspotcode · Accepted Answer · 2016-07-22 18:09:35Z

2

In TypeScript you can alias namespaces with another kind of import statement. It's pretty simple.

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;

At runtime, this is no different than const Test2 = App2.Core.Http.Test2; but at compile-time, using an import statement brings over all the type information, too.

answered Jul 22, 2016 at 18:09

cspotcode

1,9221 gold badge13 silver badges21 bronze badges

3 Comments

Disfigure Over a year ago

Yes but as it's mentioned in my post 'What if I have more file to import. I can't import more than one "App" variable and I don't want to make alias each time I'm processing an import.' but thanks for you help anyway :) hope that helps someone

cspotcode Over a year ago

I see what you mean; you're talking about PHP's behavior where the same namespace in multiple files all get merged together into one namespace. My confusion came from the differences between PHP namespaces and TypeScript namespaces. It is possible to use namespaces in TypeScript, but they don't behave the same way as PHP's.

Disfigure Over a year ago

Yes I know, using module with TypeScript the namespace behavior isn't like with PHP because in module no data are shared with the global scope. That's why you have to import all your file one by one because each file is a module.

Collectives™ on Stack Overflow

How to use Namespace Typescript properly with Webpack

3 Answers 3

Comments

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related