TypeScript — Пространства имён

От автора: пространство имен — это способ логически сгруппировать соответствующий код. Эта функция встроена в TypeScript, в отличие от JavaScript, где объявления переменных переходят в глобальную область видимости, и если множественные файлы JavaScript используются внутри одного и того же проекта, то возникает возможность перезаписывания или искажения тех же переменных, что приведёт к «глобальной проблеме засорения пространства имён» в JavaScript.

Определение пространства имён

Определение пространства имён начинается с ключевого слова namespace, после которого следует имя пространства имён, как это показано ниже:

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

Классы или интерфейсы, к которым нужно получать доступ из-за пределов пространства имён, нужно отметить ключевым словом export. Для того, чтобы получить доступ к классу или интерфейсу в другом пространстве имён, нам нужен следующий синтаксис:

namespaceName.className
SomeNameSpaceName.SomeClassName;

Если первое пространство имён находится в отдельном файле TypeScript, тогда на него нужно ссылаться с помощью тройной косой черты ссылочного синтаксиса.

/// <reference path = "SomeFileName.ts" />

Следующая программа демонстрирует использование пространства имён:

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()); } }
}

Вышеуказанный код может быть скомпилирован и выполнен при помощи следующей команды:

tsc --out app.js TestShape.ts node app.js

После компиляции мы получим следующий код JavaScript (app.js).

//Сгенерировано посредством 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());

После того, как вышеприведённый код был скомпилирован и выполнен, мы получаем такой результат:

Circle is drawn Triangle is drawn

Вложённые пространства имён

Вы можете определить одно пространство имён внутри другого пространства имён, как это показано в следующем примере:

namespace namespace_name1 { export namespace namespace_name2 { export class class_name { } } }

Чтобы получить доступ к членам вложённых пространств имён, используйте оператор dot (.), как показано ниже:

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));

Вышеуказанный код может быть скомпилирован и выполнен при помощи следующей команды:

tsc --out app.js InvoiceTest.ts node app.js

После компиляции мы получим следующий код JavaScript (app.js).

//Сгенерировано посредством 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));

После того, как вышеприведённый код был скомпилирован и выполнен, мы получим следующий результат: 200

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.