TypeScript Module

The notion of modules in JavaScript originated from ECMAScript 2015. TypeScript adopts this module concept as well.

A module serves as a means to organize a collection of associated variables, functions, classes, and interfaces, among other elements. It operates within the local scope rather than the global scope. This means that the variables, functions, classes, and interfaces defined within a module are not directly accessible from outside the module. To establish a module, the export keyword is utilized, while the import keyword allows for its use in other modules.

Modules utilize a module loader to import other modules. During execution, the module loader's role is to find and run all dependencies of a module prior to its execution. The most frequently employed module loaders in JavaScript include the CommonJS module loader for Node.js and require.js for web applications.

The module can be classified into two distinct types:

• ✅ Internal Module
• ✅ External Module

Internal Module

In previous versions of TypeScript, internal modules served to logically organize classes, interfaces, functions, and variables into a cohesive unit that could be exported to another module. In the current version of TypeScript, these modules are referred to as namespaces. Consequently, internal modules are considered outdated; however, they remain supported through the use of namespaces instead of internal modules.

Internal Module Syntax in Earlier Version:

module Sum { 
   export function add(a, b) {  
      console.log("Sum: " +(a+b)); 
   } 
}

Internal Module Syntax from ECMAScript 2015:

namespace Sum { 
   export function add(a, b) { 
      console.log("Sum: " +(a+b));
   } 
}

External Module

External modules are referred to as modules. When applications involve numerous files, managing these files without a modular strategy becomes nearly unfeasible. An external module is utilized to define the load dependencies among various external JavaScript files. If an application contains just a single JavaScript file, the external module is not applicable. The ECMAScript 2015 (ES6) module system considers each file as a distinct module.

Module declaration

A module can be defined by utilizing the export keyword. The following syntax illustrates the declaration of a module.

//FileName : EmployeeInterface.ts 
export interface Employee { 
   //code declarations 
}

The declare module can be utilized in different files by employing the import keyword, as illustrated below. The name of the file/module is indicated without an extension.

import { class/interface name } from 'module_name';

Example

Let us examine the module through the subsequent example.

Module Creation: addition.ts

export class Addition{
    constructor(private x?: number, private y?: number){
    }
    Sum(){
        console.log("SUM: " +(this.x + this.y));
    }
}

Utilizing the import keyword to access the module in a different file: app.ts

import {Addition} from './addition';

let addObject = new Addition(10, 20); 

addObject.Sum();

Compiling and Executing Modules

Launch the terminal and navigate to the directory where your project is saved. Next, enter the following command in the terminal interface.

$ tsc --module commonjs app.ts
$ node ./app.js

Output:

Sum: 30

Importing multiple modules in single file

It is possible to declare several modules within a single file. The syntax for declaring multiple modules is provided below.

import { export_name1, export_name2 } from 'module_name';

Example

Let us examine the module through the subsequent example.

Module Creation: Modules.ts

export class Addition{
    constructor(private x?: number, private y?: number){
    }
    Sum(){
        console.log("SUM: " +(this.x + this.y));
    }
}
export class Substraction{
    constructor(private a?: number, private b?: number){
    }
    Substract(){
        console.log("SUBSTRACTION: " +(this.a - this.b));
    }
}

Utilizing the import keyword to access the module from a different file: app.ts

import  {Addition, Substraction} from './Modules';

let addObject = new Addition(10, 20); 
let subObject = new Substraction(20, 10);

addObject.Sum();
subObject.Substract();

Compiling and Executing Multiple Modules

Launch the terminal and navigate to the directory where your project is saved. Then, enter the subsequent command in the terminal window.

$ tsc --module commonjs app.ts
$ node ./app.js

Output:

SUM: 30
SUBTRACTION: 10

Re-exports

In TypeScript, there are instances where modules can extend other modules and partially reveal certain aspects of their functionality. A re-export does not involve a local import or the creation of a local variable. In such scenarios, we have the option to re-export specific features either by using their original names or by renaming them.

Example

Let us examine the concept of re-exporting a module through the subsequent example.

Module Creation: Modules.ts

export class Addition{
    constructor(private x?: number, private y?: number){
    }
    Sum(){
        console.log("SUM: " +(this.x + this.y));
    }
}

Create re-exports module: re-exports.ts

// Re-exporting types Addition as plus from Modules file
export { Addition as plus } from "./Modules";

In the example provided below, the name of the Addition export class is modified to plus using the syntax {Addition as plus}. This re-exporting technique is beneficial for assigning a more descriptive name to an export, thereby enhancing the readability of our code.

Utilizing the import keyword to access the module from a different file: app.ts

//importing the exporting types from re-exports file
import {plus as Addition} from './re-exports';  //importing plus as Addition

let addObject = new Addition(10, 20); 

addObject.Sum();

Compiling and Executing Modules

Launch the terminal and navigate to the directory where your project is saved. Next, enter the following command.

$ tsc --module commonjs app.ts
$ node ./app.js

Output:

Sum: 30