1、TypeScript 命名空間

命名空間一個最明確的目的就是解決重名問題。

假設(shè)這樣一種情況，當(dāng)一個班上有兩個名叫小明的學(xué)生時，為了明確區(qū)分它們，我們在使用名字之外，不得不使用一些額外的信息，比如他們的姓（王小明，李小明），或者他們父母的名字等等。

命名空間定義了標(biāo)識符的可見范圍，一個標(biāo)識符可在多個命名空間中定義，它在不同命名空間中的含義是互不相干的。這樣，在一個新的命名空間中可定義任何標(biāo)識符，它們不會與任何已有的標(biāo)識符發(fā)生沖突，因?yàn)橐延械亩x都處于其他命名空間中。

TypeScript 中命名空間使用 namespace 來定義，語法格式如下：

namespace SomeNameSpaceName { 
   export interface ISomeInterfaceName {      }  
   export class SomeClassName {      }  
}復(fù)制

以上定義了一個命名空間 SomeNameSpaceName，如果我們需要在外部可以調(diào)用 SomeNameSpaceName 中的類和接口，則需要在類和接口添加 export 關(guān)鍵字。

要在另外一個命名空間調(diào)用語法格式為：

SomeNameSpaceName.SomeClassName;

如果一個命名空間在一個單獨(dú)的 TypeScript 文件中，則應(yīng)使用三斜杠 /// 引用它，語法格式如下：

/// < reference path = "SomeFileName.ts" / >

以下實(shí)例演示了命名空間的使用，定義在不同文件中：[qr23.cn/AKFP8k]

IShape.ts 文件代碼：

namespace Drawing { 
    export interface IShape { 
        draw(); 
    }
}復(fù)制

Circle.ts 文件代碼：

/// < reference path = "IShape.ts" / > 
namespace Drawing { 
    export class Circle implements IShape { 
        public draw() { 
            console.log("Circle is drawn"); 
        }  
    }
}復(fù)制

Triangle.ts 文件代碼：

/// < reference path = "IShape.ts" / > 
namespace Drawing { 
    export class Triangle implements IShape { 
        public draw() { 
            console.log("Triangle is drawn"); 
        } 
    } 
}復(fù)制

TestShape.ts 文件代碼：

/// < reference path = "IShape.ts" / >   
/// < reference path = "Circle.ts" / > 
/// < reference path = "Triangle.ts" / >  
function drawAllShapes(shape:Drawing.IShape) { 
    shape.draw(); 
} 
drawAllShapes(new Drawing.Circle());
drawAllShapes(new Drawing.Triangle());復(fù)制

使用 tsc 命令編譯以上代碼：

tsc --out app.js TestShape.ts

得到以下 JavaScript 代碼：

JavaScript

/// < reference path = "IShape.ts" / > 
var Drawing;
(function (Drawing) {
    var Circle = /** @class */ (function () {
        function Circle() {
        }
        Circle.prototype.draw = function () {
            console.log("Circle is drawn");
        };
        return Circle;
    }());
    Drawing.Circle = Circle;
})(Drawing || (Drawing = {}));
/// < reference path = "IShape.ts" / > 
var Drawing;
(function (Drawing) {
    var Triangle = /** @class */ (function () {
        function Triangle() {
        }
        Triangle.prototype.draw = function () {
            console.log("Triangle is drawn");
        };
        return Triangle;
    }());
    Drawing.Triangle = Triangle;
})(Drawing || (Drawing = {}));
/// < reference path = "IShape.ts" / >   
/// < reference path = "Circle.ts" / > 
/// < reference path = "Triangle.ts" / >  
function drawAllShapes(shape) {
    shape.draw();
}
drawAllShapes(new Drawing.Circle());
drawAllShapes(new Drawing.Triangle());復(fù)制

使用 node 命令查看輸出結(jié)果為：

$ node app.js
Circle is drawn
Triangle is drawn

2、嵌套命名空間

命名空間支持嵌套，即你可以將命名空間定義在另外一個命名空間里頭。

namespace namespace_name1 { 
    export namespace namespace_name2 {
        export class class_name {    } 
    } 
}復(fù)制

成員的訪問使用點(diǎn)號 . 來實(shí)現(xiàn)，如下實(shí)例：

Invoice.ts 文件代碼：

namespace Runoob { 
   export namespace invoiceApp { 
      export class Invoice { 
         public calculateDiscount(price: number) { 
            return price * .40; 
         } 
      } 
   } 
}復(fù)制

InvoiceTest.ts 文件代碼：

/// < reference path = "Invoice.ts" / >
var invoice = new Runoob.invoiceApp.Invoice(); 
console.log(invoice.calculateDiscount(500));復(fù)制

使用 tsc 命令編譯以上代碼：

tsc --out app.js InvoiceTest.ts

得到以下 JavaScript 代碼：

JavaScript

var Runoob;
(function (Runoob) {
    var invoiceApp;
    (function (invoiceApp) {
        var Invoice = /** @class */ (function () {
            function Invoice() {
            }
            Invoice.prototype.calculateDiscount = function (price) {
                return price * .40;
            };
            return Invoice;
        }());
        invoiceApp.Invoice = Invoice;
    })(invoiceApp = Runoob.invoiceApp || (Runoob.invoiceApp = {}));
})(Runoob || (Runoob = {}));
/// < reference path = "Invoice.ts" / >
var invoice = new Runoob.invoiceApp.Invoice();
console.log(invoice.calculateDiscount(500));復(fù)制

使用 node 命令查看輸出結(jié)果為：

$ node app.js
200

審核編輯 黃宇