浅析TypeScript 命名空间


Posted in Javascript onMarch 19, 2020

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 命名空间内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
用Js实现的动态增加表格示例自己写的
Oct 21 Javascript
Node.js实现的简易网页抓取功能示例
Dec 05 Javascript
JS实现文字放大效果的方法
Mar 03 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
Jun 17 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
Nov 26 Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 Javascript
使用jQuery加载html页面到指定的div实现方法
Jul 13 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 Javascript
javascript+Canvas实现画板功能
Jun 23 Javascript
Javascript如何递归遍历本地文件夹
Aug 06 Javascript
JavaScript计算出两个数的差值
Mar 19 #Javascript
JavaScript利用键盘码控制div移动
Mar 19 #Javascript
js实现百度登录窗口拖拽效果
Mar 19 #Javascript
js实现随机抽奖
Mar 19 #Javascript
js实现抽奖的两种方法
Mar 19 #Javascript
js实现九宫格抽奖
Mar 19 #Javascript
在Vue.js中使用TypeScript的方法
Mar 19 #Javascript
You might like
Zend Guard一些常见问题解答
2008/09/11 PHP
PHP中对于浮点型的数据需要用不同的方法解决
2014/03/11 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
彻底解决 webpack 打包文件体积过大问题
2017/07/07 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
Python 实现使用dict 创建二维数据、DataFrame
2018/04/13 Python
Python编程图形库之Pillow使用方法讲解
2018/12/28 Python
Selenium alert 弹窗处理的示例代码
2020/08/06 Python
比利时网上药店: Drogisterij.net
2017/03/17 全球购物
匡威德国官网:Converse德国
2019/01/26 全球购物
自荐信要包含哪些内容
2013/11/06 职场文书
英语专业个人求职信范文
2014/02/01 职场文书
教师试用期自我鉴定
2014/02/12 职场文书
教师产假请假条
2014/04/10 职场文书
病人慰问信范文
2015/02/15 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书
2016年大学生党员公开承诺书
2016/03/24 职场文书
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL
深入理解go缓存库freecache的使用
2022/02/15 Golang
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技