CODEWITHSUNDEEP
typescripttypescript1.8
Mikeb
Mikeb

Reputation: 791

TypeScript import syntax with multiple files

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.

Upvotes: 1

Views: 1138

Answers (2)

AlvinfromDiaspar
AlvinfromDiaspar

Reputation: 6814

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).

Upvotes: 0

Amid
Amid

Reputation: 22322

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.

Upvotes: 3

Related Questions