Modules and Namespaces

Shailendra Chauhan

Print 5 min read

01 Sep 2022

Advanced

12.3K Views

A module is a container to a group of related variables, functions, classes, interfaces, etc. Variables, functions, classes, and interfaces, etc. declared in a module are not accessible outside the module unless they are explicitly exported using the export keyword. Also, to consume the members of a module, you have to import it using the import keyword.

Modules are declarative and the relationship between modules is specified in terms of imports and exports at the file level. Modules are also available in ES6/ECMAScript 2015.

The modules in TypeScript are also used for better code organization, namespaces are quite handy for robust code management. Modules offer some additional benefits such as strong code isolation, effective app bundling mechanism, re-exporting of the existing components, and renaming of the app components that namespaces do not offer so that is the major difference between modules and a namespace.

Important Information

From TypeScript 1.5, "Internal modules" are "namespaces" and "External modules" are simply "modules" to match ES6 module terminology

Export

In TypeScript, you can export any declaration such as a variable, function, class, type alias, or interface by using the export keyword.

myModule.ts

//exporting Employee type
export class Employee {
 constructor(private firstName: string, private lastName: string) { }
 showDetails() {
 return this.firstName + ", " + this.lastName;
 }
}

//exporting Student type
export class Student {
 constructor(private rollNo: number, private name: string) { }
 showDetails() {
 return this.rollNo + ", " + this.name;
 }
}

Import

In TypeScript, you can import an exported declaration by using the import keyword. Let’s import the myModule file types within the app file as given below:

app.ts

//importing the exporting types Student and Employee from myModule file
import { Student, Employee } from "./myModule";

let st = new Student(1, "Mohan");
let result1 = st.showDetails();
console.log("Student Details :" + result1);

let emp = new Employee("Shailendra", "Chauhan");
let result2 = emp.showDetails();
console.log("Employee Details :" + result2);

Re-Export

In TypeScript, sometimes modules extend other modules, and partially expose some of their features. In this case, you can re-export some of their features either using their original name or introducing a new name. Let’s re-export the myModule file only Student type as shown below:

re_export.ts

//re-exporting types Student as st from myModule file
export { Student as st } from "./myModule";

export const numberRegexp = /^[0-9]+$/;

Now, you can import the types from the re_export file as given below:

app.ts

//importing the exporting types from reexport file
import { st as Student, numberRegexp } from "./reExport"; importing st as Student

let st = new Student(1, "Mohan");
let result1 = st.showDetails();
console.log("Student Details :" + result1);

Namespaces

Namespaces are simply named JavaScript objects in the global scope. Namespaces are used for the grouping of variables, functions, objects, classes, and interfaces so that you can avoid the naming collisions. Namespaces are declared using the namespace keyword.

As we know that TypeScript is a superset of JavaScript, hence, it derived the namespace from the JavaScript itself eventually. but in JavaScript, it does not have any provision for creating or using namespace because we have to implement namespaces using the concept of Immediately Invoked Function Expression (IIFE).

The namespace in TypeScript can be created using the keyword namespace as given below.

namespace namespace_name {
 // namespace configuration
}

In a single file, we can create multiple or groups of namespaces as we do not have any limitation set in TypeScript, let's see some basic examples showing how to use namespaces effectively as given below.

namespace.ts

namespace Gurukulsight {
 //exporting outside the namespace body
 export class Student {
 constructor(private rollNo: number, private name: string) { }
 showDetails() {
 return this.rollNo + ", " + this.name;
 }
 }
 // Only available inside the namespace body
 let maxCount: number = 100;
 class Employee {
 constructor(private firstName: string, private lastName: string) { }
 showDetails() {
 return this.firstName + ", " + this.lastName;
 }
 }
}
namespace DotNetTricks {
 //accessing Gurukulsight namespace student class
 import Student = Gurukulsight.Student;

 export class Person { 
 constructor(private firstName: string, private lastName: string) { }
 fullName(): string {
 return this.firstName + " " + this.lastName;
 }
 }
 //creating object of student class
 let st = new Student(1, "Mohan");
 st.showDetails();
}

Important Information

A namespace can be described in multiple files and allow to keep each file to a maintainable size.
The members of a module body, you can access only within that module body.
To make a member available outside the namespace body, you need to prefix the member with the export keyword.

Export and Import Namespaces

In TypeScript, you can export a namespace by prefixing the export keyword and using its members use import keyword. Also, to make a member available outside the namespace body, you need to prefix that member with the export keyword.

Let’s understand the namespace import and export with the help of the following example.

gurukulsight.ts

export namespace Gurukulsight {
 //exporting outside the namespace body
 export class Student {
 constructor(private rollNo: number, private name: string) { }
 showDetails() {
 return this.rollNo + ", " + this.name;
 }
 }
 // Only available inside the namespace body
 let maxCount: number = 100;
 class Employee {
 constructor(private firstName: string, private lastName: string) { }
 showDetails() {
 return this.firstName + ", " + this.lastName;
 }
 }
}

Now, let’s import the Gurukulsight namespace as given below:

main.ts

//importing the namespace
import { Gurukulsight } from "./namespace";

//accessing Gurukulsight namespace student class
import Student = Gurukulsight.Student;

//creating object of student class
let st = new Student(1, "Mohan");
st.showDetails();

What do you think?

The namespace and modules are the way to achieve a better application structure as it provides an effective way of organizing properties and attributes that can be combined into a single file and can be accessed using the name of the namespace.

I hope you will enjoy the Modules and Namespaces in TypeScript while developing your web app. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.