TypeScript module system namespace declaration merger

Namespaces

Can effectively avoid global namespace pollution. After the introduction ES6 module name space is less likely to be mentioned. If a global class library namespace is still a good solution.

the Shape {namespace 
   const PI = Math.PI; 
   // use the export exported keyword, the space may be visible inside the global 
   export function Circle (R & lt: Number) { 
      return PI * R & lt ** 2 
   } 
   Square (. 5) 
} 
Shape.circle ( 10); // global space can access the exported 
= Shape.circle import circle; // variable from individual name within a namespace, to make it clear where import and modular import meaning not the same 
circle (20);

With the expansion of the program, the namespace will be great, it needs to be split, using the same name in different namespaces files, shared namespace between them.

Space1.ts // 
/// <Reference path = "space2.ts" /> // three oblique reference tag tells the compiler, the internal namespace two files exist dependencies 
namespace {the Shape 
   Export function Square (X : Number) { 
      return X * X; 
   } 
   circle (10); // be in the circle is export, where to access 
} 

// space2.ts 
/// <Reference path = "space1.ts" /> 
namespace the Shape { 
   const Math.PI = PI; 
   // use the export exported keyword, the space may be visible inside the global 
   export function Circle (R & lt: Number) { 
      return PI * R & lt ** 2 
   } 
   Square (. 5); 
}

Namespace is best not to mix together and modules

Modular system

TypeScript have very good support for ES6 CommonJS both modules and systems, we can basically adopt the old wording. But the two do not mix, if there is mixed, it is necessary to use wording compatibility TS prepared.

Let's look at each of the wording ES6 and CommonJS

// ES6 introduced 
Import {A, B} from './Modular the System / ES6 / A'; 
Import AS A {F} from './Modular the System / ES6 / A'; 
Import All AS * from 'the System ./Modular / ES6 / A '; 
Import from ABC' ./Modular the System / ES6 / B '; 
Import from the Obj' ./Modular the System / ES6 / A ' 
// for ES6 export 
export defalut the Obj; 
export {A, B, C}; 
{D} D AS export; 
export AS C {D} from './a'; // D is the a.ts rename and export, which can derive effective use of non-default a.ts 

/ / CommonJS introduced into 
the let C1 = the require ( './ the Modular the System / Node / a.ts'); 
the let C2 = the require ( './ the Modular the System / Node / B'); 
// the CommonJS derived 
module.exports = a; / / to a variable derived 
exports.c =. 3; 
exports.d =. 4; 
corresponding to 
module.exports = {c:3, d:4} 
if the coexistence of two ways, module.exports will be covered in this way to export exports.c

Both modules are not compatible at the import and export:

Export: ES6 are permitted export default and export a plurality of variables simultaneously, but only one form CommonJS derived, one will overwrite another.
Import: ES6 can import demand can import them all, but only CommonJS Import All.

If you throw in the data module ES6, ES6 non-import module, the problem arises. So try not to mix different modular systems. If no alternative, you can use the syntax compatibility TS provides:

// Export 
Export = A; 
// Import 
Import C4 = the require ( '../ ES6 / C'); 
/ * 
1. If using the above method of deriving, this document is not allowed to export other forms of 
deriving 2. The above form of data, not only with the above syntax introduced, introduction can also es6 manner. Provided that tsconfig.json the "esModuleInterop": true configuration item to open. 
* /

Statement merger

Statement compiler will place a plurality of means having the same names are merged into one, so that the program can be scattered throughout the same name in the statement combined.

E.g:

{StateMerge interface 
   X: Number, 
   Y: String, 
} 
interface StateMerge { 
   Y: String; 
   foo (bar: String []): String [], 
} 
// interface member with the same name at this time will be declared in two combined 
let stateMerge: = {StateMerge 
   X:. 1, 
   Y: "15", 
   foo (bar: the any) { 
      return bar 
   } 
};

If the internal structure of the merger of two members of the same name how to do?

For non-member function, you must be the same type, otherwise an error.
For function members, the order of overlays which will take place in accordance with the following rules.

interface StateMerge {
   x: number,
   y: string,
   foo(bar: number): number; // 4
   foo(bar: string): string; // 5
   foo(bar: "b"): number;    // 2
}
interface StateMerge {
   y: string;
   foo(bar: string[]): string[], // 3
   foo(bar: "a"): number,  // 1
}

Internal interface in accordance with the order. Between the interface statement interface functions closer to the top in the members sorted.

If the argument appears, the highest ranking. In the first row, in front of the interface in second place behind the interface. As shown in the above-described sort notes.

Merge function and namespace

Lib function () { 
} 
namespace {Lib 
   Export Version the let = '1.0' 
} 
the console.log (Lib.version); // attribute is equivalent to adding a function Lib

The combined classes and namespaces

C {class 
} 
namespace {C 
   Export = the let state. 1 
} 
the console.log (C.state); // attribute state is equivalent to adding a Class C

Additionally, you can increase the enumeration property.

Note: be life merge in the namespace and class, function of time, be sure to namespace in the class, after the function. Otherwise error.