- 4 years ago
- Afaq Arif
- 4,327 Views
-
2
A module is used to set code written in TypeScript. Modules are mainly divided into.
- Internal Modules
- External Modules
Internal Module
Internal modules are in the more advanced version of Typescript. We used to rationally group classes, interfaces, functions into one unit that can be sent in another module. We call this logical grouping namespace in the latest version of TypeScript. So, internal modules are old. Preferably, we can use the namespace. It is advised to use namespace over internal modules.
Internal Module Syntax (Old)
module TutorialPoint {
export function add(x, y) {
console.log(x+y);
}
}
Namespace Syntax (New)
namespace TutorialPoint {
export function add(x, y) { console.log(x + y);}
}
JavaScript generated in both cases are the same
var TutorialPoint;
(function (TutorialPoint) {
function add(x, y) {
console.log(x + y);
}
TutorialPoint.add = add;
})(TutorialPoint || (TutorialPoint = {}));
External Module
External modules in TypeScript are to define and load dominions between multiple external js files. If you use one js file, external modules are not related. Primarily, we do dependency management between JavaScript files using browser script tags (<script></script>) but that’s not extendable as it is very linear while loading modules. It means you need to load files one after another as there is no unsynchronized option to load modules. When you do programming js for the server, for example, NodeJs you don’t even have script tags.
There are two outlines for loading dependents js files from a single main JavaScript file.
- Client Side – RequireJs
- Server Side – NodeJs
Selecting a Module Loader
We require a module loader to maintain loading external JavaScript files. car. It is a different js library. We use the most common library RequieJS for the browser. This is an application of AMD (Asynchronous Module Definition) specification. AMD allows you to load all files separately, even if they depend on each other instead of loading them one after the other.
Defining External Module
Each file adds as a module while stating an external module in TypeScript selecting CommonJS or AMD. Therefore, we can use an internal module within an external module freely.
If you move TypeScript from AMD to CommonJs module systems, then no extra work needs. The only thing you need to change is just the compiler flag. In JavaScript, It is too costly to move from CommonJs to AMD or vice versa.
The syntax for starting an external module is using keywords ‘export’ and ‘import’.
Syntax
//FileName : SomeInterface.ts
export interface SomeInterface {
//code declarations
}
You can use an import keyword to use the stated module in another file as given below. The filename has only been specified with no extension.
import someInterfaceRef = require(“./SomeInterface”);
Example
Let’s understand this using an example.
// 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());
The command to compile the main TypeScript file for AMD systems is
tsc --module amd TestShape.ts
It will run the following JavaScript code for AMD on composing.
File:IShape.js
//Generated by typescript 1.8.10
define(["require", "exports"], function (require, exports) {
});
File: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;
});
File: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;
});
File: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());
});
The command to compose the main TypeScript file for Commonjs systems is
tsc --module commonjs TestShape.ts
The following JavaScript code will run for Commonjs on composing.
File:Circle.js
//Generated by typescript 1.8.10
var Circle = (function () {
function Circle() {
}
Circle.prototype.draw = function () {
console.log("Cirlce is drawn");
};
return Circle;
})();
exports.Circle = Circle;
File:Triangle.js
//Generated by 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;
File:TestShape.js
//Generated by 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());
Output
Circle is drawn (external module)
Triangle is drawn (external module)
- 4 years ago
- Afaq Arif
- 4,327 Views
-
2
