您的位置:58编程 > typescript 命名空间 TypeScript 命名空间

typescript 命名空间 TypeScript 命名空间

2023-03-22 19:33 TypeScript教程

typescript 命名空间 TypeScript 命名空间

typescript 命名空间

Typescript 命名空间是一种特殊的语法,它可以帮助我们将代码分割成不同的模块,从而使代码更加有条理、易于维护。它可以让我们在一个文件中定义多个命名空间,并且可以在不同的文件中使用这些命名空间。

Typescript 命名空间的定义方式有两种:内部模块和外部模块。内部模块是在一个文件中定义的命名空间,而外部模块是在不同文件中定义的命名空间。

// 内部模块 
namespace MyNameSpace { 
    export class MyClass { 

    } 
} 
// 外部模块 
export namespace MyNameSpace { 
    export class MyClass { 

    } 
}  

TypeScript 命名空间

命名空间是对相关代码进行逻辑分组的一种方法。这是内置于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
阅读全文
以上是58编程为你收集整理的typescript 命名空间 TypeScript 命名空间全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
  •  ES6 简介

    ES6 简介

    ES6 简介ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 Ja...

  • json校验工具源码 JSON 校验工具

    json校验工具源码 JSON 校验工具

    很多网站都有提供一些很不错的JSON在线校验工具,我们也提供了一些JSON在线工具:Excel/csv数据转json格式工具这是一款可将Excel...

  • html dom 对象 HTML DOM del 对象

    html dom 对象 HTML DOM del 对象

    HTML DOM del 对象del 对象 del 对象代表了HTML文档中已被删除的文本。 del 元素定义文档中已被删除的文本。 del 元素经常与 ins...

  • html dom对象 HTML DOM Image 对象

    html dom对象 HTML DOM Image 对象

    HTML DOM Image 对象Image 对象Image 对象代表嵌入的图像。img 标签每出现一次,一个 Image 对象就会被创建。Image 对象属性W3C:...

  • htmlinputelement对象 HTML DOM Input Email 对象

    htmlinputelement对象 HTML DOM Input Email 对象

    HTML DOM Input Email 对象Input Email 对象Input Email 对象是 HTML5 新增的。Input DatetimeLocal 对象表示使用 type="email" ...

  •  HTML DOM Textarea 对象

    HTML DOM Textarea 对象

    HTML DOM Textarea 对象Textarea 对象Textarea 对象代表 HTML 表单中的一个文本域 (text-area)。HTML 表单的每一个 textarea 标...

  •  button 事件属性

    button 事件属性

    button 事件属性 事件对象定义和用法button 事件属性可返回一个整数,指示当事件被触发时哪个鼠标按键被点击。语法event.button=...

  • html link标签属性 HTML DOM Body link 属性

    html link标签属性 HTML DOM Body link 属性

    Body link 属性 Body 对象定义和用法 link 属性可设置或者返回 body 元素的 link属性值。 link 属性指定了文档中链接未被点击访...

  • sass命令 Sass 功能指令

    sass命令 Sass 功能指令

    在本章中,我们来研究函数指令。在SASS中,您可以创建自己的函数,并在脚本上下文中使用它们,或者可以与任何值一起使用。通过使...

  • 完全匹配的定义 LESS 完全匹配与扩展

    完全匹配的定义 LESS 完全匹配与扩展

    描述默认情况下, extend 查找选择器之间的完全匹配。 对于具有相同含义的两个第n个表达式,扩展无关紧要,但它只寻找与为选择器...

© 2024 58编程 58biancheng.com 版权所有 联系我们
桂ICP备12005667号-32 Powered by CMS