TypeScript - Ad alanları
Ad alanı, ilgili kodu mantıksal olarak gruplamanın bir yoludur. Bu, değişken bildirimlerinin genel bir kapsama girdiği JavaScript'ten farklı olarak TypeScript'te yerleşiktir ve aynı projede birden fazla JavaScript dosyası kullanılırsa, aynı değişkenlerin üzerine yazma veya yanlış yorumlama olasılığı olacaktır ve bu da, "genel ad alanı kirliliği sorununa" JavaScript.
Bir Ad Alanı Tanımlama
Bir ad alanı tanımı anahtar kelimeyle başlar namespace ardından aşağıdaki ad alanı adı gelir -
namespace SomeNameSpaceName {
export interface ISomeInterfaceName { }
export class SomeClassName { }
}
İsim alanı dışından erişilmesi gereken sınıflar veya arayüzler anahtar kelime ile işaretlenmelidir. export.
Başka bir ad alanındaki sınıfa veya arabirime erişmek için sözdizimi ad alanıAdı. sınıfAdı olacaktır.
SomeNameSpaceName.SomeClassName;
İlk ad alanı ayrı TypeScript dosyasındaysa, üçlü eğik çizgi referans sözdizimi kullanılarak başvurulmalıdır.
/// <reference path = "SomeFileName.ts" />
Aşağıdaki program ad alanlarının kullanımını gösterir -
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());
}
}
}
Yukarıdaki kod, aşağıdaki komut kullanılarak derlenebilir ve çalıştırılabilir -
tsc --out app.js TestShape.ts
node app.js
Derlemede, aşağıdaki JavaScript kodunu (app.js) oluşturacaktır.
//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());
Yukarıdaki kod derlendiğinde ve yürütüldüğünde, aşağıdaki sonucu verir -
Circle is drawn
Triangle is drawn
İç içe geçmiş ad alanları
Bir ad alanını başka bir ad alanı içinde aşağıdaki gibi tanımlayabilirsiniz -
namespace namespace_name1 {
export namespace namespace_name2 {
export class class_name { }
}
}
Aşağıdaki gibi nokta (.) Operatörünü kullanarak yuvalanmış ad alanı üyelerine erişebilirsiniz -
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));
Yukarıdaki kod, aşağıdaki komut kullanılarak derlenebilir ve çalıştırılabilir -
tsc --out app.js InvoiceTest.ts
node app.js
Derlemede, aşağıdaki JavaScript kodunu (app.js) oluşturacaktır.
//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));
Yukarıdaki kod derlendiğinde ve yürütüldüğünde, aşağıdaki sonucu verir -
200