Typescript 命名空间是一种特殊的语法,它可以帮助我们将代码分割成不同的模块,从而使代码更加有条理、易于维护。它可以让我们在一个文件中定义多个命名空间,并且可以在不同的文件中使用这些命名空间。
Typescript 命名空间的定义方式有两种:内部模块和外部模块。内部模块是在一个文件中定义的命名空间,而外部模块是在不同文件中定义的命名空间。
// 内部模块 namespace MyNameSpace { export class MyClass { } } // 外部模块 export namespace MyNameSpace { export class MyClass { } }
命名空间是对相关代码进行逻辑分组的一种方法。这是内置于TypeScript中的,与JavaScript不同,其中变量声明进入全局范围,如果在同一个项目中使用多个JavaScript文件,则可能会覆盖或误解相同的变量,这将导致JavaScript中的“全局命名空间污染问题”。
命名空间的定义以关键字namespace开头,后跟命名空间名称,如下所示:
namespace SomeNameSpaceName { export interface ISomeInterfaceName { } export class SomeClassName { } }
应在命名空间外部访问的类或接口应使用关键字export标记。
要访问另一个名称空间中的类或接口,语法将为namespaceName.className
SomeNameSpaceName.SomeClassName;
如果第一个命名空间位于单独的TypeScript文件中,那么就应该使用三斜杠引用语法引用它。
/// <reference path = "SomeFileName.ts" />
下面的程序演示使用命名空间:
FileName :IShape.ts ---------- namespace Drawing { export interface IShape { draw(); } } FileName :Circle.ts ---------- /// <reference path = "IShape.ts" /> namespace Drawing { export class Circle implements IShape { public draw() { console.log("Circle is drawn"); } FileName :Triangle.ts ---------- /// <reference path = "IShape.ts" /> namespace Drawing { export class Triangle implements IShape { public draw() { console.log("Triangle is drawn"); } } FileName : 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()); } } }
上面的代码可以被编译并使用下面的命令执行:
tsc --out app.js TestShape.ts node app.js
在编译时,它会生成以下JavaScript代码(app.js)。
//Generated by typescript 1.8.10 /// <reference path = "IShape.ts" /> var Drawing; (function (Drawing) { var Circle = (function () { function Circle() { } Circle.prototype.draw = function () { console.log("Cirlce is drawn"); }; return Circle; }()); Drawing.Circle = Circle; })(Drawing || (Drawing = {})); /// <reference path = "IShape.ts" /> var Drawing; (function (Drawing) { var Triangle = (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());
当上述代码被编译和执行时,它产生了以下结果:
Circle is drawn Triangle is drawn
您可以在另一个命名空间中定义一个命名空间:
namespace namespace_name1 { export namespace namespace_name2 { export class class_name { } } }
您可以用点(.)运算符访问嵌套命名空间的成员,如下所示:
FileName : Invoice.ts namespace tutorialPoint { export namespace invoiceApp { export class Invoice { public calculateDiscount(price: number) { return price * .40; } } } } FileName: InvoiceTest.ts /// <reference path = "Invoice.ts" /> var invoice = new tutorialPoint.invoiceApp.Invoice(); console.log(invoice.calculateDiscount(500));
上面的代码可以被编译并使用下面的命令执行:
tsc --out app.js InvoiceTest.ts node app.js
在编译时,它会生成以下JavaScript代码(app.js):
//Generated by typescript 1.8.10 var tutorialPoint; (function (tutorialPoint) { var invoiceApp; (function (invoiceApp) { var Invoice = (function () { function Invoice() { } Invoice.prototype.calculateDiscount = function (price) { return price * .40; }; return Invoice; }()); invoiceApp.Invoice = Invoice; })(invoiceApp = tutorialPoint.invoiceApp || (tutorialPoint.invoiceApp = {})); })(tutorialPoint || (tutorialPoint = {})); /// <reference path = "Invoice.ts" /> var invoice = new tutorialPoint.invoiceApp.Invoice(); console.log(invoice.calculateDiscount(500));
当上述代码被编译和执行时,它产生了以下结果:
200
很多网站都有提供一些很不错的JSON在线校验工具,我们也提供了一些JSON在线工具:Excel/csv数据转json格式工具这是一款可将Excel...
HTML DOM del 对象del 对象 del 对象代表了HTML文档中已被删除的文本。 del 元素定义文档中已被删除的文本。 del 元素经常与 ins...
HTML DOM Image 对象Image 对象Image 对象代表嵌入的图像。img 标签每出现一次,一个 Image 对象就会被创建。Image 对象属性W3C:...
HTML DOM Input Email 对象Input Email 对象Input Email 对象是 HTML5 新增的。Input DatetimeLocal 对象表示使用 type="email" ...
HTML DOM Textarea 对象Textarea 对象Textarea 对象代表 HTML 表单中的一个文本域 (text-area)。HTML 表单的每一个 textarea 标...
Body link 属性 Body 对象定义和用法 link 属性可设置或者返回 body 元素的 link属性值。 link 属性指定了文档中链接未被点击访...