angularjs - How to wrap several TypeScript modules into groups for organization -

my typescript project has grown in moderate size , i'm trying come way organize it.

right now, project (an angular 1.x app) has following structure:

-app/  |  |-components/  | |  | |-component a/  | | |  | | |-(..models..).ts  | | |-(..services..).ts  | |  | |-component b/  | | |  | | |-(..models..).ts  | | |-(..directives..).ts  | |  | (...)  | |  | |-component z/  | | |  | | |-(..directives..).ts  | | |-(..services..).ts  | |  | |-components.ts  |  |-app.ts 

basically, i've grouped app components logically instance video component have models , services declared in single directory. load import components single file app/components.ts , re-export them.

 // models  export * './componenta/models.ts';  export * './componentb/models.ts';  export * './componentc/models.ts';   // services  export * './componenta/services.ts';  export * './componentx/services.ts';  export * './componentz/services.ts';   // directives  export * './componentb/directives.ts';  export * './componenty/directives.ts';  export * './componentz/directives.ts'; 

i'd import app/components.ts file in each of component well, since required multiple components in every time , importing each 1 individually repetitive.

 // app/components/componenta/services.ts  import * projectname '../components.ts';   export class componenta_service1 extends projectname.baseservice {       protected $http: ng.ihttpservice;      protected $log: ng.ilogservice;      protected configservice: projectname.configservice;       /** @nginject */      constructor($http: ng.ihttpservice, $log: ng.ilogservice, configservice: projectname.configservice) {           this.$http = $http;          this.$log = $lot;          this.configservice = configservice;      }       // (.....)  }   export class componenta_service2 { /* ... */ }  export class componenta_service3 extends projectname.componentz_service4 { /* ... */ } 

this worked out while, since project has several dozen classes , interfaces defined. projectname becomes cluttered dozens of members.

what i'd group different members based on are. instance, structure like:

 namespace projectname {       namespace models {           class componenta_model1 { /* ... */ }          class componenta_model2 { /* ... */ }          class componentb_model1 { /* ... */ }      }       namespace services {           class componenta_service1 { /* ... */ }          class componenta_service2 { /* ... */ }          class componentz_service4 { /* ... */ }      }       namespace directives {           class componentb_directive1 { /* ... */ }          class componenty_directive2 { /* ... */ }          class componentz_directive3 { /* ... */ }      }  } 

so far, i'm unable figure out how achieve using typescript. more specifically, i'm unable import several different modules , export them single module.

any ideas if possible in typescript, or i'm heading in wrong direction here?

---

update (january 31, 2016): thought should add ended doing. had started trying architecture similar suggested @vadim macagon below. while correct solution looking do, decided against because of reasons pointed out @mk. in accepted answer below.

i'm importing individual modules respective directories directly in each file. while slight overhead when writing code, still better approach.

here suggestions:

1. don't mix internal (namespaces) , external modules, pick 1 whole project , stick it. use external modules. don't use namespaces/internal, except declaration merging. see this article , others.
2. don't re-export: can make navigating original file more cumbersome, , breaks tools (like find usages). creates 2 references same resource - original, , re-export. if codebase invokes side-effects in 1 of files, can obscure side-effects.

it seems you're trying minimize imports, result importing in project 1 global "import registry" file. bulky definitions might fine well-composed t.ds files, not imports. instead, think of modules files, , import them individually, needed:

import { myclass } "../foo/bar/myclass"; import { tostring, otherutil } "../foo/baz/utils"; 

in other words, instead of using import registry file, use directory structure group files/modules. minor nice consequence of can write extends baseservice instead of qualifying, in extends projectname.baseservice. if have many imports (or many exports) suggests file might need broken up.