浅析TypeScript 命名空间

更新时间：2020年03月19日 14:26:16 作者：X W F

命名空间一个最明确的目的就是解决重名问题。这篇文章主要介绍了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 命名空间内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

微信小程序转化为uni-app项目的方法示例
这篇文章主要介绍了微信小程序转化为uni-app项目的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05
js实现类似新浪微博首页内容渐显效果的方法
这篇文章主要介绍了js实现类似新浪微博首页内容渐显效果的方法,实例分析了渐显效果的实现要点与方法,非常具有实用价值,需要的朋友可以参考下
2015-04-04
JavaScript必看小技巧(必看)
下面小编就为大家带来一篇JavaScript必看小技巧(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
uniapp常用路由跳转的几种方式(navigateTo、redirectTo...)
uni-app有两种方式进行路由跳转,下面这篇文章主要给大家介绍了关于uniapp常用路由跳转的几种方式(navigateTo、redirectTo...),文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-11
javascript不同页面传值的改进版
改进点：支持同页面有多个文本框，可自动向不同的文本框传值。先看演示吧
2008-09-09
通过JavaScript实现CSS和JS文件的动态加载
在现代Web开发中,动态加载CSS和JavaScript文件是一个常见的需求,这种技术可以用来优化页面加载速度,减少初始加载时间,并提高用户体验,本文将详细介绍如何通过JavaScript实现CSS和JS文件的动态加载,包括不同的加载方法、注意事项以及最佳实践
2024-11-11
Js四则运算函数代码
javascript的除法结果会有误差，在两个浮点数相除的时候会比较明显。这个函数返回较为精确的除法结果
2012-07-07
FF IE浏览器修改标签透明度的方法
本文为大家介绍下FF IE浏览器修改标签透明度的方法，需要的朋友可以参考下
2014-01-01
一文带你理解JS中的原型和原型链
在学习JavaScript中的继承机制时,我们常常会遇到原型和原型链这两个概念,在初学阶段,不理解这些概念很容易陷入迷茫,甚至会导致学习 JS 的路程变得曲折,本文将介绍JavaScript原型和原型链的概念、设计思想以及相关的使用方法,需要的朋友可以参考下
2023-07-07
JavaScript将单位有秒s的数据转换为00:00:00格式
在前端开发中,时间格式化是一个高频需求,无论是视频播放时长、倒计时组件还是数据报表,都需要将原始的秒数转换为易读的时分秒格式,今天我们来深入分析一段实用的时间格式化代码,看看它是如何工作的,以及如何进一步优化提升,需要的朋友可以参考下
2025-11-11

浅析TypeScript 命名空间

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具