TypeScript Modules

The design philosophy of TypeScript modules is to organize code that can be replaced.

Modules execute within their own scope, not in the global scope, which means variables, functions, classes, etc., defined in a module are not visible outside the module unless they are explicitly exported using the export keyword. Similarly, to use variables, functions, classes, etc., exported from other modules, we must import them using the import keyword.

The relationship between two modules is established at the file level using import and export.

Modules use a module loader to import other modules. At runtime, the module loader's role is to find and execute all dependencies of a module before executing the module's code. The most well-known JavaScript module loaders are CommonJS for Node.js and Require.js for web applications.

Additionally, there are SystemJs and Webpack.

Module export uses the export keyword, with the following syntax:

// File name: SomeInterface.ts
export interface SomeInterface {
   // Code part
}

To use the module in another file, you need to import it using the import keyword:

import someInterfaceRef = require("./SomeInterface");

Example

IShape.ts File Code:

/// <reference path = "IShape.ts" />
export interface IShape {
   draw();
}

Circle.ts File Code:

import shape = require("./IShape");
export class Circle implements shape.IShape {
   public draw() {
      console.log("Circle is drawn (external module)");
   }
}

Triangle.ts File Code:

import shape = require("./IShape");
export class Triangle implements shape.IShape {
   public draw() {
      console.log("Triangle is drawn (external module)");
   }
}

TestShape.ts File Code:

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

Compile the above code using the tsc command (AMD):

tsc --module amd TestShape.ts

This results in the following JavaScript code:

IShape.js File Code:

define(["require", "exports"], function (require, exports) {
});

Circle.js File Code:

define(["require", "exports"], function (require, exports) {
   var Circle = (function () {
      function Circle() {
      }
      Circle.prototype.draw = function () {
         console.log("Circle is drawn (external module)");
      };
      return Circle;
   })();
   exports.Circle = Circle;
});

Triangle.js File Code:

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 File Code:

define(["require", "exports", "./Circle", "./Triangle"],
   function (require, exports, circle, triangle) {

   function drawAllShapes(shapeToDraw) {
      shapeToDraw.draw();
   }
   drawAllShapes(new circle.Circle());
   drawAllShapes(new triangle.Triangle());
});

Compile the above code using the tsc command (Commonjs):

tsc --module commonjs TestShape.ts

This results in the following JavaScript code:

Circle.js File Code:

var Circle = (function () {
   function Circle() {
   }
   Circle.prototype.draw = function () {
      console.log("Circle is drawn");
   };
   return Circle;
})();

exports.Circle = Circle;

Triangle.js File Code:

var Triangle = (function () {
   function Triangle() {
   }
   Triangle.prototype.draw = function () {
      console.log("Triangle is drawn (external module)");
   };
   return Triangle;
})();
exports.Triangle = Triangle;

TestShape.js File Code:

var circle = require("./Circle");
var triangle = require("./Triangle");

function drawAllShapes(shapeToDraw) {
   shapeToDraw.draw();
}
drawAllShapes(new circle.Circle());
drawAllShapes(new triangle.Triangle());

The output is:

Circle is drawn (external module)
Triangle is drawn (external module)