当前位置: 首页 > 编程笔记 >

浅析TypeScript 命名空间

黎苑博
2023-03-14
本文向大家介绍浅析TypeScript 命名空间,包括了浅析TypeScript 命名空间的使用技巧和注意事项,需要的朋友参考一下

TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准。

TypeScript 由微软开发的自由和开源的编程语言。

TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上。

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

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

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

TypeScript 中命名空间使用 namespace 来定义,语法格式如下:

namespace SomeNameSpaceName { 
 export interface ISomeInterfaceName {  } 
 export class SomeClassName {  } 
}

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

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

SomeNameSpaceName.SomeClassName;

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

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

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

IShape.ts 文件代码:

namespace Drawing { 
 export interface IShape { 
  draw(); 
 }
}

Circle.ts 文件代码:

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

Triangle.ts 文件代码:

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

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 命令编译以上代码:

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());

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

$ node app.js
Circle is drawn
Triangle is drawn

嵌套命名空间

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

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

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

Invoice.ts 文件代码:

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

InvoiceTest.ts 文件代码:

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

使用 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));

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

$ node app.js
200

TypeScript 语言特性

TypeScript 是一种给 JavaScript 添加特性的语言扩展。增加的功能包括:

  • 类型批注和编译时类型检查
  • 类型推断
  • 类型擦除
  • 接口
  • 枚举
  • Mixin
  • 泛型编程
  • 名字空间
  • 元组
  • Await

以下功能是从 ECMA 2015 反向移植而来:

  • 模块
  • lambda 函数的箭头语法
  • 可选参数以及默认参数

JavaScript 与 TypeScript 的区别

TypeScript 是 JavaScript 的超集,扩展了 JavaScript 的语法,因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改,TypeScript 通过类型注解提供编译时的静态类型检查。

TypeScript 可处理已有的 JavaScript 代码,并只对其中的 TypeScript 代码进行编译。

总结

到此这篇关于TypeScript 命名空间的文章就介绍到这了,更多相关TypeScript 命名空间内容请搜索小牛知识库以前的文章或继续浏览下面的相关文章希望大家以后多多支持小牛知识库!

 类似资料:
  • 主要内容:IShape.ts 文件代码:,Circle.ts 文件代码:,Triangle.ts 文件代码:,TestShape.ts 文件代码:,JavaScript,嵌套命名空间,Invoice.ts 文件代码:,InvoiceTest.ts 文件代码:,JavaScript命名空间一个最明确的目的就是解决重名问题。 假设这样一种情况,当一个班上有两个名叫小明的学生时,为了明确区分它们,我们在使用名字之外,不得不使用一些额外的信息,比如他们的姓(王小明,李小明),或者他们父母的名字等等。 命

  • 命名空间同样是为了避免变量命名冲突,TypeScript 官方将命名空间视为“内部模块”,上节介绍的模块被视为“外部模块”。 如果声明相同名称的命名空间,TypeScript 编译器会将其合并为一个声明,具体的合并规则会在下节介绍。 1. 慕课解释 使用 namespace 关键字来声明命名空间。 TypeScript 的命名空间可以将代码包裹起来,只对外暴露这个命名空间对象,通过 export

  • 本文向大家介绍PHP中的命名空间相关概念浅析,包括了PHP中的命名空间相关概念浅析的使用技巧和注意事项,需要的朋友参考一下 1. PHP中的命名空间是什么? 什么是命名空间?“从广义上来说,命名空间是一种封装事物的方法。在很多地方都可以见到这种抽象概念。例如,在操作系统中目录用来将相关文件分组,对于目录中的文件来说,它就扮演了命名空间的角色。具体举个例子,文件 foo.txt 可以同时在目录/ho

  • 我需要解析和打印ns4:功能部分。空手道以json格式打印它。我试着参考这个答案。但是,我得到'ERROR:'前缀'xsi'的命名空间没有被声明.'错误,如果使用建议的xPath.即, 这是我的XML:它包含许多具有不同“ns”值的部分,但我在这里给出了一个额外的内容。 这是我使用的xPath; 注意:我将上述xml保存在一个单独的文件test1中。xml。我只是在读它并解析它的值。 这就是我得到

  • 我尝试像这样解析xml: 我尝试解析这个xml: 但是我的jobNode总是空的。如果我把我的xml改成这样,它就可以工作了:

  • 我必须解析一个XML,其中缺少xmlns: xsi="http://www.w3.org/2001/XMLSchema-instance"命名空间,所以xml看起来像这样: 但应该是这样的: type属性确保了正确的子类。 解析器是通过一个手写的xsd自动生成的$ 一个简单的解决方案是在输入XML上运行一个字符串替换(type=\\"到xsi: type=\"),但这很难看。有没有更好的解决办法?