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

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

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

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

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

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

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

namespaceName.className
SomeNameSpaceName.SomeClassName;

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

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

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

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее
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.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Курс по TypeScript

Прямо сейчас посмотрите курс по TypeScript!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree