How to wrap multiple TypeScript modules in groups for organization

Question

My TypeScript project has grown to a moderate size, and I'm trying to come up with a good way to organize it.

At the moment, the project (Angular 1.x application) has the 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 logically grouped the components of the application, so that the component Videowill have its models and services declared in the same directory. Then I load all the components into a single file app/components.tsand re-export them.

 // models
 export * from './componentA/models.ts';
 export * from './componentB/models.ts';
 export * from './componentC/models.ts';

 // services
 export * from './componentA/services.ts';
 export * from './componentX/services.ts';
 export * from './componentZ/services.ts';

 // directives
 export * from './componentB/directives.ts';
 export * from './componentY/directives.ts';
 export * from './componentZ/directives.ts';

Then I would import the file app/components.tsinto each of the components, since I almost always required several components at each time point, and the import of each of them individually became very repetitive.

 // app/components/componentA/services.ts
 import * as ProjectName from '../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 { /* ... */ }

, , , . ProjectName .

, . , , :

 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 { /* ... */ }
     }
 }

, , TypeScript. , import , export - .

, TypeScript, ?

---

(31 2016 ): , , . , , @Vadim Macagon . , , - , @mk. .

. , .

Answer 1

:

• ( ) , . . /, . . .
• : (, ). - . , .

, , . t.ds, . , :

import { MyClass } from "../foo/bar/MyClass";
import { toString, otherUtil } from "../foo/baz/Utils";

, /. , , extends BaseService , , extends ProjectName.BaseService. ( ), , .

Answer 2

, , - :

// models.ts
export * from './componentA/models.ts';
export * from './componentB/models.ts';
export * from './componentC/models.ts';

// services.ts
export * from './componentA/services.ts';
export * from './componentX/services.ts';
export * from './componentZ/services.ts';

// directives.ts
export * from './componentB/directives.ts';
export * from './componentY/directives.ts';
export * from './componentZ/directives.ts';

// projectname.ts
import * as Models from './models';
import * as Services from './services';
import * as Directives from './directives';

export { Models, Services, Directives };

// app.ts
import { Models, Services, Directives } from './projectname';
// OR
import * as ProjectName from './projectname';