typescript 命名空间——迹忆客-ag捕鱼王app官网

命名空间一个最明确的目的就是解决重名问题。

假设这样一种情况，当一个班上有两个名叫小明的学生时，为了明确区分它们，我们在使用名字之外，不得不使用一些额外的信息，比如他们的姓（王小明，李小明），或者他们父母的名字等等。

命名空间定义了标识符的可见范围，一个标识符可在多个名字空间中定义，它在不同名字空间中的含义是互不相干的。这样，在一个新的名字空间中可定义任何标识符，它们不会与任何已有的标识符发生冲突，因为已有的定义都处于其他名字空间中。

typescript 中命名空间使用 namespace 来定义，语法格式如下：

namespace somenamespacename { 
   export interface isomeinterfacename {      }  
   export class someclassname {      }  
}

以上定义了一个命名空间 somenamespacename，如果我们需要在外部可以调用 somenamespacename 中的类和接口，则需要在类和接口添加 export 关键字。

要在另外一个命名空间调用语法格式为：

somenamespacename.someclassname;

如果一个命名空间在一个单独的 typescript 文件中，则应使用三斜杠 /// 引用它，语法格式如下：

/// 

以下实例演示了命名空间的使用，定义在不同文件中：

ishape.ts 文件代码：

namespace drawing { 
    export interface ishape { 
        draw(); 
    }
}

circle.ts 文件代码：

///  
namespace drawing { 
    export class circle implements ishape { 
        public draw() { 
            console.log("circle is drawn"); 
        }  
    }
}

triangle.ts 文件代码：

///  
namespace drawing { 
    export class triangle implements ishape { 
        public draw() { 
            console.log("triangle is drawn"); 
        } 
    } 
}

testshape.ts 文件代码：

///    
///  
///   
function drawallshapes(shape:drawing.ishape) { 
    shape.draw(); 
} 
drawallshapes(new drawing.circle());
drawallshapes(new drawing.triangle());

使用 tsc 命令编译以上代码：

tsc --out app.js testshape.ts  

得到以下 javascript 代码：

javascript

///  
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 = {}));
///  
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 = {}));
///    
///  
///   
function drawallshapes(shape) {
    shape.draw();
}
drawallshapes(new drawing.circle());
drawallshapes(new drawing.triangle());

使用 node 命令查看输出结果为：

$ node app.js
circle is drawn
triangle is drawn

嵌套命名空间

命名空间支持嵌套，即你可以将命名空间定义在另外一个命名空间里头。

namespace namespace_name1 { 
    export namespace namespace_name2 {
        export class class_name {    } 
    } 
}

成员的访问使用点号 . 来实现，如下实例：

invoice.ts 文件代码：

namespace jiyik { 
   export namespace invoiceapp { 
      export class invoice { 
         public calculatediscount(price: number) { 
            return price * .40; 
         } 
      } 
   } 
}

invoicetest.ts 文件代码：

/// 
var invoice = new runoob.invoiceapp.invoice(); 
console.log(invoice.calculatediscount(500));

使用 tsc 命令编译以上代码：

tsc --out app.js invoicetest.ts

得到以下 javascript 代码：

javascript

var jiyik;
(function (jiyik) {
    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 = {}));
/// 
var invoice = new runoob.invoiceapp.invoice();
console.log(invoice.calculatediscount(500));

使用 node 命令查看输出结果为：

$ node app.js
200