TypeScript import syntax with multiple files

Question

I'm trying to create a large angular app in TypeScript and I want my app layed out with the following folder structure:

./App
--- Controllers
--- --- HomeController.ts
--- --- SomeOtherController.ts
--- Directives
--- --- MyDirective.ts
--- app.ts

I would also like the namespaces/modules to be layed out so all controllers are in the MyApp.Controllers namespace. So in the above example I'd have the 2 controllers in modules:

MyApp.Controllers.HomeController
MyApp.Controllers.SomeOtherController

I set this up doing the following:

HomeController.ts:

export module MyApp.Controllers {
  export class HomeController {
      ...
  }
}

SomeOtherController.ts

export module MyApp.Controllers {
  export class SomeOtherController {
      ...
  }
}

Now in app.ts I want to import all of my controllers, and this is where I'm running into problems, I try:

 import * as Controllers from './controllers/HomeController'

but then to access the controller I have to do:

Controllers.MyApp.Controllers

Which is ugly. Also how do I then get the controller from the other file? Ideally I'd like to import everything in the namespace "MyApp.Controllers" and we able to use it without prefixing MyApp.Controllers in the code.

score 3 · Answer 1 · answered Apr 25 '16 at 17:38

3

You must get away from the way of thinking that is usual to languages like C#/Java where you organize your code using namespaces. If typescript you organize your code by using approach that is similar to file system where you have folders and files.

Each file is already a module - so get rid of export module inside your ts files.
You group logically coupled classes inside one file, ideally one class per file.
You group files together inside folders to further structure your application.

So in your case after removing export module you will use controllers like this:

import {HomeController} from './controllers/HomeController'

Hope this helps.

answered Apr 25 '16 at 17:38

Amid

21,508
5
57
54

That helps! Just for interest sake what is the purpose of the "export module" then? When should I be using that? – Mikeb Apr 25 '16 at 17:39
You still can use `export module` or `export namespace` if you are for some reason in one file exporting really large number of classes/interfaces - then you can structure them within one file by splitting under different modules. But in such cases I personally recommend to create two files instead. For much more detailed explanation - this is a nice thread to read: http://stackoverflow.com/questions/30357634/how-do-i-use-namespaces-with-typescript-external-modules – Amid Apr 25 '16 at 18:23

score 0 · Answer 2 · answered Jun 23 '16 at 17:09

I am not sure how to get away from the "ugly" Controllers.MyApp.Controllers, where you have to specify the fully qualified namespace + name.

Now, IMHO (in my humble opinion), I think there is nothing "ugly" about this. You would only need to fully qualify the name if you are referencing it from another namespace. But if you refer to it from the same namespace, you need not require the full name. Makes sense?

In addition, I prefer adding all of the reference to a single .TS file (e.g. Reference.ts) and just that Reference.ts file everywhere. This reference file references all .TS files in the project in a sorted manner (so compiler can compile correctly top-to-bottom).

TypeScript import syntax with multiple files

2 Answers2