首页 >> js开发 >> js浅析TypeScript 命名空间js大全
js浅析TypeScript 命名空间js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准。TypeScript 由微软开发的自由和开源的编程语言。TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上。命名空间一个最明确的目的就是解决重名问题。假设这样一种情况,当一个班上有两个名叫小明的学生时,为了明确区分它们,我们在使用名字之外,不得不使用一些额外的信息,比如他们的姓(王小明,李小明),或者他们父母的名字等等。命名空间定义了标识符的可见范围,一个标识符可在多个名字空间中定义,它在不同名字空间中的含义是互不相干的。这样,在一个新的名字空间中可定义任何标识符,它们不会与任何已有的标识符发生冲突,因为已有的定义都处于其他名字空间中。TypeScript 中命名空间使用 namespace 来定义,语法格式如下:
namespace SomeNameSpaceName {
export interface ISomeInterfaceName {
}
export class SomeClassName {
}
}
namespace SomeNameSpaceName {
export interface ISomeInterfaceName {
}
export class SomeClassName {
}
}以上定义了一个命名空间 SomeNameSpaceName,如果我们需要在外部可以调用 SomeNameSpaceName 中的类和接口,则需要在类和接口添加 export 关键字。要在另外一个命名空间调用语法格式为:
SomeNameSpaceName.SomeClassName;
SomeNameSpaceName.SomeClassName;如果一个命名空间在一个单独的 TypeScript 文件中,则应使用三斜杠 /// 引用它,语法格式如下:
///
/// 以下实例演示了命名空间的使用,定义在不同文件中:IShape.ts 文件代码:
namespace Drawing {
export interface IShape {
draw();
}
}
namespace Drawing {
export interface IShape {
draw();
}
}
Circle.ts 文件代码:
///
namespace Drawing {
export class Circle implements IShape {
public draw() {
console.log("Circle is drawn");
}
}
}
///
namespace Drawing {
export class Circle implements IShape {
public draw() {
console.log("Circle is drawn");
}
}
}Triangle.ts 文件代码:
///
namespace Drawing {
export class Triangle implements IShape {
public draw() {
console.log("Triangle is drawn");
}
}
}
///
namespace Drawing {
export class Triangle implements IShape {
public draw() {
console.log("Triangle is drawn");
}
}
}TestShape.ts 文件代码:
///
///
///
function drawAllShapes(shape:Drawing.IShape) {
shape.draw();
}
drawAllShapes(new Drawing.Circle());
drawAllShapes(new Drawing.Triangle());
///
///
///
function drawAllShapes(shape:Drawing.IShape) {
shape.draw();
}
drawAllShapes(new Drawing.Circle());
drawAllShapes(new Drawing.Triangle());使用 tsc 命令编译以上代码:
tsc --out app.js TestShape.ts
tsc --out app.js TestShape.ts 得到以下 JavaScript 代码:
JavaScript
///
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 = {}));
///
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 = {}));
///
///
///
function drawAllShapes(shape) {
shape.draw();
}
drawAllShapes(new Drawing.Circle());
drawAllShapes(new Drawing.Triangle());
JavaScript
///
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 = {}));
///
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 = {}));
///
///
///
function drawAllShapes(shape) {
shape.draw();
}
drawAllShapes(new Drawing.Circle());
drawAllShapes(new Drawing.Triangle());使用 node 命令查看输出结果为:
$ node app.js
Circle is drawn
Triangle is drawn
$ node app.js
Circle is drawn
Triangle is drawn嵌套命名空间命名空间支持嵌套,即你可以将命名空间定义在另外一个命名空间里头。
namespace namespace_name1 {
export namespace namespace_name2 {
export class class_name { }
}
}
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;
}
}
}
}
namespace Runoob {
export namespace invoiceApp {
export class Invoice {
public calculateDiscount(price: number) {
return price * .40;
}
}
}
}InvoiceTest.ts 文件代码:
///
var invoice = new Runoob.invoiceApp.Invoice();
console.log(invoice.calculateDiscount(500));
///
var invoice = new Runoob.invoiceApp.Invoice();
console.log(invoice.calculateDiscount(500));使用 tsc 命令编译以上代码:
tsc --out app.js InvoiceTest.ts
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 = {}));
///
var invoice = new Runoob.invoiceApp.Invoice();
console.log(invoice.calculateDiscount(500));
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 = {}));
///
var invoice = new Runoob.invoiceApp.Invoice();
console.log(invoice.calculateDiscount(500));使用 node 命令查看输出结果为:
$ node app.js
200
$ node app.js
200TypeScript 语言特性
TypeScript 语言特性TypeScript 语言特性TypeScript 是一种给 JavaScript 添加特性的语言扩展。增加的功能包括:
类型批注和编译时类型检查
类型推断
类型擦除
接口
枚举
Mixin
泛型编程
名字空间
元组
Await
类型批注和编译时类型检查类型推断类型擦除接口枚举Mixin泛型编程名字空间元组Await以下功能是从 ECMA 2021 反向移植而来:
类
模块
lambda 函数的箭头语法
可选参数以及默认参数
类模块lambda 函数的箭头语法可选参数以及默认参数
JavaScript 与 TypeScript 的区别
JavaScript 与 TypeScript 的区别
TypeScript 是 JavaScript 的超集,扩展了 JavaScript 的语法,因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改,TypeScript 通过类型注解提供编译时的静态类型检查。TypeScript 可处理已有的 JavaScript 代码,并只对其中的 TypeScript 代码进行编译。总结总结总结
namespace SomeNameSpaceName {
export interface ISomeInterfaceName {
}
export class SomeClassName {
}
}
namespace SomeNameSpaceName {
export interface ISomeInterfaceName {
}
export class SomeClassName {
}
}以上定义了一个命名空间 SomeNameSpaceName,如果我们需要在外部可以调用 SomeNameSpaceName 中的类和接口,则需要在类和接口添加 export 关键字。要在另外一个命名空间调用语法格式为:
SomeNameSpaceName.SomeClassName;
SomeNameSpaceName.SomeClassName;如果一个命名空间在一个单独的 TypeScript 文件中,则应使用三斜杠 /// 引用它,语法格式如下:
///
///
namespace Drawing {
export interface IShape {
draw();
}
}
namespace Drawing {
export interface IShape {
draw();
}
}
Circle.ts 文件代码:
///
namespace Drawing {
export class Circle implements IShape {
public draw() {
console.log("Circle is drawn");
}
}
}
///
namespace Drawing {
export class Circle implements IShape {
public draw() {
console.log("Circle is drawn");
}
}
}Triangle.ts 文件代码:
///
namespace Drawing {
export class Triangle implements IShape {
public draw() {
console.log("Triangle is drawn");
}
}
}
///
namespace Drawing {
export class Triangle implements IShape {
public draw() {
console.log("Triangle is drawn");
}
}
}TestShape.ts 文件代码:
///
///
///
function drawAllShapes(shape:Drawing.IShape) {
shape.draw();
}
drawAllShapes(new Drawing.Circle());
drawAllShapes(new Drawing.Triangle());
///
///
///
function drawAllShapes(shape:Drawing.IShape) {
shape.draw();
}
drawAllShapes(new Drawing.Circle());
drawAllShapes(new Drawing.Triangle());使用 tsc 命令编译以上代码:
tsc --out app.js TestShape.ts
tsc --out app.js TestShape.ts 得到以下 JavaScript 代码:
JavaScript
///
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 = {}));
///
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 = {}));
///
///
///
function drawAllShapes(shape) {
shape.draw();
}
drawAllShapes(new Drawing.Circle());
drawAllShapes(new Drawing.Triangle());
JavaScript
///
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 = {}));
///
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 = {}));
///
///
///
function drawAllShapes(shape) {
shape.draw();
}
drawAllShapes(new Drawing.Circle());
drawAllShapes(new Drawing.Triangle());使用 node 命令查看输出结果为:
$ node app.js
Circle is drawn
Triangle is drawn
$ node app.js
Circle is drawn
Triangle is drawn嵌套命名空间命名空间支持嵌套,即你可以将命名空间定义在另外一个命名空间里头。
namespace namespace_name1 {
export namespace namespace_name2 {
export class class_name { }
}
}
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;
}
}
}
}
namespace Runoob {
export namespace invoiceApp {
export class Invoice {
public calculateDiscount(price: number) {
return price * .40;
}
}
}
}InvoiceTest.ts 文件代码:
///
var invoice = new Runoob.invoiceApp.Invoice();
console.log(invoice.calculateDiscount(500));
///
var invoice = new Runoob.invoiceApp.Invoice();
console.log(invoice.calculateDiscount(500));使用 tsc 命令编译以上代码:
tsc --out app.js InvoiceTest.ts
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 = {}));
///
var invoice = new Runoob.invoiceApp.Invoice();
console.log(invoice.calculateDiscount(500));
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 = {}));
///
var invoice = new Runoob.invoiceApp.Invoice();
console.log(invoice.calculateDiscount(500));使用 node 命令查看输出结果为:
$ node app.js
200
$ node app.js
200TypeScript 语言特性
TypeScript 语言特性TypeScript 语言特性TypeScript 是一种给 JavaScript 添加特性的语言扩展。增加的功能包括:
类型批注和编译时类型检查
类型推断
类型擦除
接口
枚举
Mixin
泛型编程
名字空间
元组
Await
类型批注和编译时类型检查类型推断类型擦除接口枚举Mixin泛型编程名字空间元组Await以下功能是从 ECMA 2021 反向移植而来:
类
模块
lambda 函数的箭头语法
可选参数以及默认参数
类模块lambda 函数的箭头语法可选参数以及默认参数
JavaScript 与 TypeScript 的区别
JavaScript 与 TypeScript 的区别
TypeScript 是 JavaScript 的超集,扩展了 JavaScript 的语法,因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改,TypeScript 通过类型注解提供编译时的静态类型检查。TypeScript 可处理已有的 JavaScript 代码,并只对其中的 TypeScript 代码进行编译。总结总结总结
相关文章:
- js在Echarts图中给坐标轴加一个标识线markLinejs大全
- jsvue data对象重新赋值无效(未更改)的解决方式js大全
- js解决Vue @submit 提交后不刷新页面问题js大全
- jsJS中作用域以及变量范围分析js大全
- jsvue cli4.0项目引入typescript的方法js大全
- jsvue 点击其他区域关闭自定义div操作js大全
- jswebpack+vue-cil 中proxyTable配置接口地址代理操作js大全
- js解决Echarts 显示隐藏后宽度高度变小的问题js大全
- JavaScript基于js实现判断浏览器类型代码实例
- jsvue中echarts图表大小适应窗口大小且不需要刷新案例js大全