TypeScript 命名空间教程：从基础定义到嵌套使用

TypeScript 概述与命名空间基础

TypeScript 作为 JavaScript 的超集，全面支持 ECMAScript 6 标准规范。

该语言由微软开发，属于自由且开源的编程语言范畴。

TypeScript 的设计初衷在于支持大型应用的开发，其编译产物为纯 JavaScript 代码，可兼容运行于任何主流浏览器环境中。

命名空间的核心作用在于解决标识符重名冲突问题。

类比现实场景，当班级中有两名叫“小明”的学生时，需借助姓氏（如王小明、李小明）或父母姓名等额外信息来明确区分个体身份。

命名空间通过定义标识符的可见范围来解决冲突：同一标识符可在多个命名空间中独立存在，彼此含义互不干扰。在新命名空间中定义的任何标识符，只要不与已有命名空间中的定义冲突，即可自由使用。

命名空间定义与外部调用

在 TypeScript 中，使用关键字 namespace 来定义命名空间，具体语法结构如下：


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

上述代码定义了一个名为 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 语言特性

TypeScript 是一种为 JavaScript 添加扩展特性的语言，其新增功能包括：

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

以下功能是从 ECMA 2015 标准反向移植而来：

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

JavaScript 与 TypeScript 的区别

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

TypeScript 能够处理已有的 JavaScript 代码，并仅对其中符合 TypeScript 规范的代码进行编译。

总结

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

TypeScript 命名空间详解：定义、使用与嵌套

TypeScript 概述与命名空间基础

命名空间定义与外部调用

跨文件引用与编译示例

嵌套命名空间应用

TypeScript 语言特性与对比

实用工具推荐