浅析TypeScript 命名空间

2023-07-28 09:54:12 68

TypeScript是JavaScript的一个超集，支持ECMAScript6标准。

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

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

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

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

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

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

namespaceSomeNameSpaceName{
exportinterfaceISomeInterfaceName{}
exportclassSomeClassName{}
}

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

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

SomeNameSpaceName.SomeClassName;

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

///

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

IShape.ts文件代码：

namespaceDrawing{
exportinterfaceIShape{
draw();
}
}

Circle.ts文件代码：

///
namespaceDrawing{
exportclassCircleimplementsIShape{
publicdraw(){
console.log("Circleisdrawn");
}
}
}

Triangle.ts文件代码：

///
namespaceDrawing{
exportclassTriangleimplementsIShape{
publicdraw(){
console.log("Triangleisdrawn");
}
}
}

TestShape.ts文件代码：

///
///
///
functiondrawAllShapes(shape:Drawing.IShape){
shape.draw();
}
drawAllShapes(newDrawing.Circle());
drawAllShapes(newDrawing.Triangle());

使用tsc命令编译以上代码：

tsc--outapp.jsTestShape.ts

得到以下JavaScript代码：

JavaScript
///
varDrawing;
(function(Drawing){
varCircle=/**@class*/(function(){
functionCircle(){
}
Circle.prototype.draw=function(){
console.log("Circleisdrawn");
};
returnCircle;
}());
Drawing.Circle=Circle;
})(Drawing||(Drawing={}));
///
varDrawing;
(function(Drawing){
varTriangle=/**@class*/(function(){
functionTriangle(){
}
Triangle.prototype.draw=function(){
console.log("Triangleisdrawn");
};
returnTriangle;
}());
Drawing.Triangle=Triangle;
})(Drawing||(Drawing={}));
///
///
///
functiondrawAllShapes(shape){
shape.draw();
}
drawAllShapes(newDrawing.Circle());
drawAllShapes(newDrawing.Triangle());

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

$nodeapp.js
Circleisdrawn
Triangleisdrawn

嵌套命名空间

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

namespacenamespace_name1{
exportnamespacenamespace_name2{
exportclassclass_name{}
}
}

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

Invoice.ts文件代码：

namespaceRunoob{
exportnamespaceinvoiceApp{
exportclassInvoice{
publiccalculateDiscount(price:number){
returnprice*.40;
}
}
}
}

InvoiceTest.ts文件代码：

///
varinvoice=newRunoob.invoiceApp.Invoice();
console.log(invoice.calculateDiscount(500));

使用tsc命令编译以上代码：

tsc--outapp.jsInvoiceTest.ts

得到以下JavaScript代码：

JavaScript
varRunoob;
(function(Runoob){
varinvoiceApp;
(function(invoiceApp){
varInvoice=/**@class*/(function(){
functionInvoice(){
}
Invoice.prototype.calculateDiscount=function(price){
returnprice*.40;
};
returnInvoice;
}());
invoiceApp.Invoice=Invoice;
})(invoiceApp=Runoob.invoiceApp||(Runoob.invoiceApp={}));
})(Runoob||(Runoob={}));
///
varinvoice=newRunoob.invoiceApp.Invoice();
console.log(invoice.calculateDiscount(500));

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

$nodeapp.js
200

TypeScript语言特性

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

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

以下功能是从ECMA2015反向移植而来：

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

JavaScript与TypeScript的区别

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

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

总结

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

浅析TypeScript 命名空间

热门推荐

随机推荐