Using namespace spread over multiple module files

Question

I've started work on a large-scale typescript project.

Right from the outset, I want to keep my files organized (this project will be split between lots of developers so order is very necessary).

I have been attempting to use modules / namespaces and splitting classes out into separate files for each one, with a folder holding the namespace.

The file structure is:

app.ts
\Classes
---- \Animals
---- ---- Mammals.ts
---- ---- Reptiles.ts

I then attempt to import all files in that namespace in app.ts using something like: import * as Animals from "./Classes/Animals"

As for the namespace files themselves, I have tried the following, with no success:

namespace Animals {
    export class Mammals {
        constructor() {
        }
    }
}

and also:

module Animals {
    export class Reptiles {
        constructor() {
        }
    }
}

Unfortunately, the path is never recognized (as it points to a folder and not a single file). Is this even possible? Having all my classes from a single namespace in one file will result in files which are thousands of lines long and for this project that is not maintainable.

I have also noticed that TypeScript 1.5 has support for tsconfig.json - however, having to add each file manually to the map is a sure-fire way of introducing issues when developers start adding classes.

NOTE: I'm using Visual Studio 2015, TypeScript 1.5 (I believe, not sure how to verify). I also have ES6 support turned on.

Answer 1

Found a way to achieve your goal but not with the namespace keyword.

1. The "Animals" classes, Animal.ts & Mammal.ts & Reptile.ts under namespace.
2. with index.ts for the barrel.
3. animals.ts for namespace grouping.

Sample Classes:

index.ts (as barrel)

animals.ts (for namespace grouping)

And here you go of the concept of the namespace.

Answer 2

External modules imply that you load modules file by file. Both AMD and CommonJS do not have such thing as namespace. You can use some kind of postprocessing to bundle files in one module.

---

The following defines an internal module:

module Animals {
    export class Reptiles {
        constructor() {
        }
    }
}

You shouldn't use import for it. Animals.Reptiles is visible anywhere. The only aim is to load scripts in the proper order (e.g. base classes before heritors). So you should list all files in ts.config or somewhere else. In my project I use bundles on folders and have a convention to add @ to filenames of base classes.

Another solution is to use external modules: AMD (RequireJS) or CommonJS (Browserify). In that case remove upper level module from declaration. If one file contains only one type you can export it as a root:

class Reptiles {
    constructor() {
    }
}

export = Reptiles;

You can refer module by file path:

import Reptilies = require('..\Animals\Reptilies')
var  reptile = new Reptile();

Or with new ES6 modules:

export class Reptiles {
    constructor() {
    }
}

---

import { Reptiles } from '..\Animals\Reptilies';

Answer 3

Use re-exporting to create an external module that groups and exposes types from other modules:

// Classes/Animals.ts
export * from '.\Animals\Mammals';
export * from '.\Animals\Reptiles';

Then import the types from the new module as usual:

// app.ts
import * as Animals from '.\Classes\Animals'

let dog: Animals.Dog;
let snake: Animals.Snake;

Or

// app.ts
import { Dog, Snake } from '.\Classes\Animals'

let dog: Dog;
let snake: Snake;

Answer 4

Seems there is no way to do this using namespaces on their own (unless you want to use Module Augmentation and declare every new item to add separately); however, a namespace can be part of a class, which can be extended! This is the best alternative I can find:

CoreLibraryTypes.ts

abstract class Types { }
namespace Types { 
    export class TypeA { }
    export class TypeB { }
    export class TypeC { }
}
export { Types };

CoreTypesExtended.ts

import CoreLibraryTypes from "./CoreLibraryTypes";

abstract class Types extends CoreLibraryTypes { }
namespace Types { 
    export class TypeD { }
    export class TypeE { }
    export class TypeF { }
}
export { Types };

The downside, of course, is that only the import of the second module will have the new types added. The first module will remain as before. Ideally it would be nice to "update" a namespace of types with additional types (like from plugins), such that module augmentation was more naturally supported (instead of having to write it by hand), but I guess that will have to do until someone realizes augmentation of modules by manually declaring updated definitions is just a half-a$$ way to do what namespaces already do lol (including classes, as seen above, which can already use namespace merging as part of the class). ;)

Note: In the example above I used export { Types }; for a reason - this will allow others to augment my modules. Augmentation is not supported for default exports (unless that is desired - sort of seals it virtually).

Answer 5

If you have your own library and you want to export the multiple files like from namespace, you can do this:

// index.ts
import * as Animals from './animals';
export { Animals };