Please enable Javascript to correctly display the contents on Dot Net Tricks!

Modules and Namespaces

Posted On : 10 Mar 2017
Updated On : 01 Jan 0001
Total Views : 565

Modules and Namespaces

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

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 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 import keyword. Let’s import the myModule file types within 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 show 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 form 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 grouping of variables, functions, objects, classes, and interfaces, so that you can avoid the naming collisions. Namespaces are declared using the namespace keyword.

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

  1. A namespace can be described in multiple files and allow to keep each file to a maintainable size.

  2. The members of a module body, you can access only within that module body.

  3. 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 export keyword and to use 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 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?

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.



+