浅析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中settimeout方法加参数
Feb 28 Javascript
javascript中字符串拼接详解
Sep 26 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
Dec 12 Javascript
javascript 秒表计时器实现代码
Mar 09 Javascript
VUE实现日历组件功能
Mar 13 Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 Javascript
JavaScript使用小插件实现倒计时的方法讲解
Mar 11 Javascript
Vue将页面导出为图片或者PDF
Aug 17 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 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
php查询操作实现投票功能
2016/05/09 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
jquery显示和隐藏div特效实例
2013/02/27 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
2015/05/12 Javascript
js实现图片点击左右轮播
2015/07/08 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
2015/07/28 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
jquery ztree实现树的搜索功能
2016/02/25 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
简单实现nodejs上传功能
2017/01/14 NodeJs
jQuery插件ContextMenu自定义图标
2017/03/15 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
微信小程序“摇一摇”的实例代码
2017/07/20 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
Pycharm以root权限运行脚本的方法
2019/01/19 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
Python matplotlib画图时图例说明(legend)放到图像外侧详解
2020/05/16 Python
使用CSS3制作响应式导航菜单的方法
2015/07/12 HTML / CSS
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
日本整理专家Marie Kondo的官方在线商店:KonMari
2020/06/29 全球购物
运动会表扬稿大全
2014/01/16 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
导游词之台湾安平古堡
2019/12/25 职场文书
html form表单基础入门案例讲解
2021/07/21 HTML / CSS