TypeScript - модули - CoderLessons.com

Модуль разработан с идеей организовать код, написанный на 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> </ script>). Но это не расширяемо, поскольку очень линейно при загрузке модулей. Это означает, что вместо загрузки файлов один за другим нет асинхронной опции для загрузки модулей. Когда вы программируете js для сервера, например, NodeJ, у вас даже нет тегов скрипта.

Существует два сценария загрузки зависимых js- файлов из одного основного файла JavaScript.

Сторона клиента — RequireJs
Сторона сервера — NodeJs

Выбор загрузчика модуля

Для поддержки загрузки внешних файлов JavaScript нам нужен загрузчик модулей. Это будет еще одна библиотека JS . Для браузера наиболее распространенной библиотекой является RequieJS. Это реализация спецификации AMD (определение асинхронного модуля). Вместо загрузки файлов один за другим AMD может загружать их все отдельно, даже если они зависят друг от друга.

Определение внешнего модуля

При определении внешнего модуля в TypeScript для CommonJS или AMD каждый файл рассматривается как модуль. Поэтому необязательно использовать внутренний модуль с внешним модулем.

Если вы переносите TypeScript из AMD в модульные системы CommonJs, дополнительная работа не требуется. Единственное, что вам нужно изменить, это просто флаг компилятора. В отличие от JavaScript, при переносе с CommonJ на AMD или наоборот возникают накладные расходы.

Синтаксис для объявления внешнего модуля использует ключевые слова «экспорт» и «импорт».

Синтаксис

//FileName : SomeInterface.ts 
export interface SomeInterface { 
   //code declarations 
}

Чтобы использовать объявленный модуль в другом файле, используется ключевое слово импорта, как указано ниже. Имя файла указывается только без расширения.

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

//Generated by typescript 1.8.10
define(["require", "exports"], function (require, exports) {
});

Файл: circle.js

//Generated by 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

//Generated by 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

//Generated by 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 .

TypeScript — модули