От автора: модули были разработаны с целью организации кода. В TypeScript модули обычно разделяются на: Внутренние Модули и Внешние Модули.
Внутренние Модули
Внутренние модули появились в ранней версии Typescript. Их использовали для того, чтобы логически сгруппировать классы, интерфейсы, функции в один элемент и экспортировать в другой модуль. Такое логическое группирование в последней версии TypeScript называется пространством имён. Так что внутренние модули устарели, вместо этого мы можем использовать пространство имён. Внутренние модули всё ещё поддерживаются, но рекомендуется использовать именно пространство имён.
Синтаксис внутренних модулей (старый)
module TutorialPoint { export function add(x, y) { console.log(x+y); } }
Синтаксис пространства имён (новый)
namespace TutorialPoint { export function add(x, y) { console.log(x + y);} }
JavaScript в обоих случаях выглядит одинаково
var TutorialPoint; (function (TutorialPoint) { function add(x, y) { console.log(x + y); } TutorialPoint.add = add; })(TutorialPoint || (TutorialPoint = {}));
Внешние модули
Внешние модули в TypeScript были созданы для того, чтобы задавать и загружать зависимости между множественными внешними js-файлами. Если используется только один js-файл, то использование внешних модулей нецелесообразно. Долгое время управление зависимостями между JavaScript файлами проводилось с использованием тэгов script браузера (). Но оно не расширяется, так как является линейным во время загрузки модулей. Это значит, что нет возможности асинхронного варианта загрузки модулей, вместо загрузки файлов один за другим. Когда вы создаёте js, например, для сервера NodeJsу, у вас даже нет тэгов script.
Существует два сценария для загрузки зависимых js файлов от единственного главного JavaScript файла.
Сторона клиента — RequireJs
Сторона сервера — NodeJs
Выбор загрузчика модулей
Для поддержки загрузки внешних файлов JavaScript, нам нужен загрузчик модулей. Таковым является другая js библиотека. Наиболее употребляемой библиотекой для браузера является RequieJS. Она была представлена спецификацией AMD (Асинхронное определение модуля). Вместо того, чтобы загружать файлы один за другим, AMD может загружать их по отдельности, даже когда они зависят друг от друга.
Определение внешнего модуля
Во время определения в TypeScript внешнего модуля для выполнения на CommonJS или AMD, каждый файл рассматривается как модуль. Таким образом, использовать внутренний модуль и внешний модуль необязательно.
Если вы перемещаете TypeScript от модульной системы AMD до CommonJs, то не требуется никаких дополнительных действий. Единственное, что придётся изменить — это флаг компилятора. В отличие от JavaScript, здесь есть служебные операции по переходу от CommonJs к AMD или наоборот.
Синтаксис для объявления внешнего модуля заключается в использовании ключевых слов ‘export’ и ‘import’.
//FileName : SomeInterface.ts export interface SomeInterface { //объявление кода }
Для того, чтобы использовать объявленный модуль в другом файле, нужно использовать ключевое слово import, как это показано в примере ниже. Указывается только имя файла, без расширения.
import someInterfaceRef = require(“./SomeInterface”);
Давайте рассмотрим пример.
// IShape.ts export interface IShape { draw(); } // Circle.ts import shape = require("./IShape"); export class Circle implements shape.IShape { public draw() { console.log("Cirlce is drawn (external module)"); } } // Triangle.ts import shape = require("./IShape"); export class Triangle implements shape.IShape { public draw() { console.log("Triangle is drawn (external module)"); } } // TestShape.ts import shape = require("./IShape"); import circle = require("./Circle"); import triangle = require("./Triangle"); function drawAllShapes(shapeToDraw: shape.IShape) { shapeToDraw.draw(); } drawAllShapes(new circle.Circle()); drawAllShapes(new triangle.Triangle());
Команда, используемая для компиляции главного TypeScript файла для систем AMD, следующая:
tsc --module amd TestShape.ts
После компиляции мы получим следующий код JavaScript для AMD.
Файл: IShape.js
//Сгенерировано посредством typescript 1.8.10
define(["require", "exports"], function (require, exports) {
});
Файл: Circle.js
//Сгенерировано посредством typescript 1.8.10
define(["require", "exports"], function (require, exports) { var Circle = (function () { function Circle() { } Circle.prototype.draw = function () { console.log("Cirlce is drawn (external module)"); }; return Circle; })(); exports.Circle = Circle;
});
Файл: Triangle.js
//Сгенерировано посредством typescript 1.8.10
define(["require", "exports"], function (require, exports) { var Triangle = (function () { function Triangle() { } Triangle.prototype.draw = function () { console.log("Triangle is drawn (external module)"); }; return Triangle; })(); exports.Triangle = Triangle;
});
Файл: TestShape.js
//Сгенерировано посредством typescript 1.8.10
define(["require", "exports", "./Circle", "./Triangle"], function (require, exports, circle, triangle) { function drawAllShapes(shapeToDraw) { shapeToDraw.draw(); } drawAllShapes(new circle.Circle()); drawAllShapes(new triangle.Triangle());
});
Команда, используемая для компиляции главного TypeScript файла для Commonjs систем, следующая:
tsc --module commonjs TestShape.ts
После компиляции мы получим следующий код JavaScript для Commonjs.
Файл: Circle.js
//Сгенерировано посредством typescript 1.8.10
var Circle = (function () { function Circle() { } Circle.prototype.draw = function () { console.log("Cirlce is drawn"); }; return Circle;
})(); exports.Circle = Circle;
Файл: Triangle.js
//Сгенерировано посредством typescript 1.8.10
var Triangle = (function () { function Triangle() { } Triangle.prototype.draw = function () { console.log("Triangle is drawn (external module)"); }; return Triangle;
})();
exports.Triangle = Triangle;
Файл: TestShape.js
//Сгенерировано посредством typescript 1.8.10
var circle = require("./Circle");
var triangle = require("./Triangle"); function drawAllShapes(shapeToDraw) { shapeToDraw.draw();
}
drawAllShapes(new circle.Circle());
drawAllShapes(new triangle.Triangle());
Результат
Cirlce is drawn (external module) Triangle is drawn (external module)
Источник: https://www.tutorialspoint.com/
Редакция: Команда webformyself.