TypeScript Module

JavaScript has a concept of modules from ECMAScript 2015. TypeScript shares this concept of a module.

A module is a way to create a group of related variables, functions, classes, and interfaces, etc. It executes in the local scope, not in the global scope. In other words, the variables, functions, classes, and interfaces declared in a module cannot be accessible outside the module directly. We can create a module by using the export keyword and can use in other modules by using the import keyword.

Modules import another module by using a module loader. At runtime, the module loader is responsible for locating and executing all dependencies of a module before executing it. The most common modules loaders which are used in JavaScript are the CommonJS module loader for Node.js and require.js for Web applications.

We can divide the module into two categories:

1. Internal Module
2. External Module

Internal Module

Internal modules were in the earlier version of Typescript. It was used for logical grouping of the classes, interfaces, functions, variables into a single unit and can be exported in another module. The modules are named as a namespace in the latest version of TypeScript. So today, internal modules are obsolete. But they are still supported by using namespace over 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 also known as a module. When the applications consisting of hundreds of files, then it is almost impossible to handle these files without a modular approach. External Module is used to specify the load dependencies between the multiple external js files. If the application has only one js file, the external module is not relevant. ECMAScript 2015(ES6) module system treats every file as a module.

Module declaration

We can declare a module by using the export keyword. The syntax for the module declaration is given below.

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

We can use the declare module in other files by using an import keyword, which looks like below. The file/module name is specified without an extension.

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

Let us understands the module with the following example.

Module Creation: addition.ts

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

Accessing the module in another file by using the import keyword: app.ts

import {Addition} from './addition';

let addObject = new Addition(10, 20); 

addObject.Sum();

Compiling and Executing Modules

Open the terminal and go to the location where you stored your project. Now, type the following command in the terminal window.

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

Importing multiple modules in single file

We can define multiple modules in a single file. The syntax for multiple module declaration is given below.

import { export_name1, export_name2 } from 'module_name';

Let us understands the module with the following 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));
    }
}

Accessing the module in another file by using the import keyword: 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

Open the terminal and go to the location where you stored your project. Now, type the following command in the terminal window.

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

Re-exports

In TypeScript, sometimes modules extend other modules, and partially expose some of their features. A re-export does not import it locally or introduce a local variable. In this case, we can re-export some of their features either using their original name or rename it.

Let us understands the re-export concept of a module with the following 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 below example, the name of Addition export class is changed to plus using {Addition as plus}. The re-exporting is useful in assigning a more meaningful name to an export which increases the readability of our program.

Accessing the module in another file by using the import keyword: 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

Open the terminal and go to the location where you stored your project. Now, type the following command.

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