TypeScript - Không gian tên
Không gian tên là một cách để nhóm các mã liên quan một cách hợp lý. Điều này được tích hợp sẵn trong TypeScript không giống như trong JavaScript nơi khai báo biến đi vào phạm vi toàn cầu và nếu nhiều tệp JavaScript được sử dụng trong cùng một dự án sẽ có khả năng ghi đè hoặc hiểu sai các biến giống nhau, điều này sẽ dẫn đến "vấn đề ô nhiễm không gian tên toàn cầu" trong JavaScript.
Xác định không gian tên
Định nghĩa không gian tên bắt đầu bằng từ khóa namespace theo sau là tên không gian tên như sau:
namespace SomeNameSpaceName {
export interface ISomeInterfaceName { }
export class SomeClassName { }
}
Các lớp hoặc giao diện sẽ được truy cập bên ngoài không gian tên phải được đánh dấu bằng từ khóa export.
Để truy cập lớp hoặc giao diện trong không gian tên khác, cú pháp sẽ là namespaceName.className
SomeNameSpaceName.SomeClassName;
Nếu không gian tên đầu tiên nằm trong tệp TypeScript riêng biệt, thì nó phải được tham chiếu bằng cú pháp tham chiếu dấu gạch chéo ba.
/// <reference path = "SomeFileName.ts" />
Chương trình sau minh họa việc sử dụng không gian tên:
FileName :IShape.ts
----------
namespace Drawing {
export interface IShape {
draw();
}
}
FileName :Circle.ts
----------
/// <reference path = "IShape.ts" />
namespace Drawing {
export class Circle implements IShape {
public draw() {
console.log("Circle is drawn");
}
FileName :Triangle.ts
----------
/// <reference path = "IShape.ts" />
namespace Drawing {
export class Triangle implements IShape {
public draw() {
console.log("Triangle is drawn");
}
}
FileName : 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());
}
}
}
Đoạn mã trên có thể được biên dịch và thực thi bằng lệnh sau:
tsc --out app.js TestShape.ts
node app.js
Khi biên dịch, nó sẽ tạo mã JavaScript sau (app.js).
//Generated by typescript 1.8.10
/// <reference path = "IShape.ts" />
var Drawing;
(function (Drawing) {
var Circle = (function () {
function Circle() {
}
Circle.prototype.draw = function () {
console.log("Cirlce is drawn");
};
return Circle;
}());
Drawing.Circle = Circle;
})(Drawing || (Drawing = {}));
/// <reference path = "IShape.ts" />
var Drawing;
(function (Drawing) {
var Triangle = (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());
Khi đoạn mã trên được biên dịch và thực thi, nó tạo ra kết quả sau:
Circle is drawn
Triangle is drawn
Không gian tên lồng nhau
Bạn có thể xác định một không gian tên bên trong một không gian tên khác như sau:
namespace namespace_name1 {
export namespace namespace_name2 {
export class class_name { }
}
}
Bạn có thể truy cập các thành viên của không gian tên lồng nhau bằng cách sử dụng toán tử dấu chấm (.) Như sau:
FileName : Invoice.ts
namespace tutorialPoint {
export namespace invoiceApp {
export class Invoice {
public calculateDiscount(price: number) {
return price * .40;
}
}
}
}
FileName: InvoiceTest.ts
/// <reference path = "Invoice.ts" />
var invoice = new tutorialPoint.invoiceApp.Invoice();
console.log(invoice.calculateDiscount(500));
Đoạn mã trên có thể được biên dịch và thực thi bằng lệnh sau:
tsc --out app.js InvoiceTest.ts
node app.js
Khi biên dịch, nó sẽ tạo mã JavaScript sau (app.js).
//Generated by typescript 1.8.10
var tutorialPoint;
(function (tutorialPoint) {
var invoiceApp;
(function (invoiceApp) {
var Invoice = (function () {
function Invoice() {
}
Invoice.prototype.calculateDiscount = function (price) {
return price * .40;
};
return Invoice;
}());
invoiceApp.Invoice = Invoice;
})(invoiceApp = tutorialPoint.invoiceApp || (tutorialPoint.invoiceApp = {}));
})(tutorialPoint || (tutorialPoint = {}));
/// <reference path = "Invoice.ts" />
var invoice = new tutorialPoint.invoiceApp.Invoice();
console.log(invoice.calculateDiscount(500));
Khi đoạn mã trên được biên dịch và thực thi, nó tạo ra kết quả sau:
200