TypeScript practice is essential to note (7) - namespace

　　Namespace TypeScript the like can be integrally related to those interfaces, a class or object code are grouped together, both isolation scope, naming conflicts can be avoided, and so that the clear code structure, easier to track. After naming the interior space, all entities are private by default part, derived from the export keyword need to access the outside, as shown below.

namespace Util {
  export function log(msg) {
    console.log(msg);
  }
}
Util.log("strick");

　　TypeScript namespace above will be compiled into two parts: Util instant variables and functions, as shown in the following code, which is a common modular package.

was Util;
(function(Util) {
  function log(msg) {
    console.log(msg);
  }
  Util.log = log;
}) (Useful || (useful = {}));
Util.log("strick");

　　Note that, since TypeScript 1.5 ES6 In keeping with the terminology, to have internal modules namespace, the external module referred to as modules, and thus for the original module and the internal module keyword namespace keyword present in the same function . However, in order to avoid being ES6, CommonJS, UMD module concepts are similar to the name confusion, the official recommended namespace.

A separation

　　When an excessive expansion of the namespace, to facilitate maintenance, it is necessary to separate it into individual files. For example, the namespace into three files, the code follows the first util.ts file.

namespace Util {
  export function log(msg) {
    console.log(msg);
  }
}

　　Code validator.ts second file is as follows.

namespace Validator {
  isAcceptable export function (str) {
    return str.length > 1;
  }
}

　　Code default.ts third file is shown below, where the three instructions to notify the external oblique file compiler at compile time need to be introduced, and it must be declared on the top of the file.

/// <reference path="util.ts" />
/// <reference path="validator.ts" />
let str = "abc";
if(Validator.isAcceptable(str)) {
  Util.log("success");
}

　　When the need to process multiple files containing namespaces, there are two ways of ensuring that the compiled code is loaded in the correct sequence. The first is to add at compile command --outFile input parameters, as shown, it will be followed with a script file output and one or more files to compile.

tsc --outFile default.js default.ts

　　The second script is compiled by the HTML <script> element into the correct order on the page, as shown below.

<script src="util.js"></script>
<script src="validator.js"></script>
<script src="default.js"></script>

 

Second, the Aliases

　　Supports nested namespaces, the namespace declaration inside the other, as shown below.

namespace Shape {
  export namespace Polygon {
    export class Triangle { }
    export class Square { }
  }
}

　　When such namespace references may take a short alias for import by keyword, the following code shown in FIG. Be careful not to be confused with the load module import syntax right here import must contain namespace.

import P = Shape.Polygon;
import Triangle = Shape.Polygon.Triangle;
let sq = new P.Square();
let triangle = new Triangle();

　　Can be found by the compiled code, since the import of syntactic sugar var (code shown below), thus changing the value of P or Triangle reference variable does not affect the namespace.

var P = Shape.Polygon;
var Triangle = Shape.Polygon.Triangle;
var sq = new P.Square();
var triangle = new Triangle();