Difference between Namespaces and Modules
Namespace
A namespace is a way that is used for logical grouping of functionalities. It allows us to organize our code in a much cleaner way. A namespace can include interfaces, classes, functions, and variables to support a group of related functionalities.
Unlike JavaScript, namespaces are inbuilt into TypeScript. In JavaScript, the variables declarations go into the global scope. If the multiple JavaScript files are used in the same project, then there will be a possibility of confusing new users by overwriting them with a similar name. Hence, the use of TypeScript namespace removes the naming collisions.
A namespace can span in multiple files and allow to concatenate each file using “–outFile” as they were all defined in one place.
Namespace Declaration
FileName: StoreCalc.ts
Accessing Namespace
To read more information, click here.
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.
Module Declaration
FileName: addition.ts
Accessing Modules
To read more information, click here.
Module vs. Namespace
| SN | Module | Namespace |
|---|---|---|
| 1. | A module is a way which is used to organize the code in separate files and can execute in their local scope, not in the global scope. | A namespace is a way which is used for logical grouping of functionalities with local scoping. |
| 2. | A Module uses the export keyword to expose module functionalities. | We can create a namespace by using the namespace keyword and all the interfaces, classes, functions, and variables can be defined in the curly braces{} by using the export keyword. |
| 3. | All the exports functions and classes in a module are accessible outside the module. | We must use the export keyword for functions and classes to be able to access it outside the namespace. |
| 4. | We can use a module in other modules by using the import keyword. | The namespace must be included in a file by using triple-slash (///) reference syntax. e.g. /// <reference path="path to namespace file"/> |
| 5. | It is also known as an external module. | It is also known as an internal module. |
| 6. | We can compile the module by using the “–module” command. | We can compile the namespace by using the “–outFile” command. |
| 7. | Modules import another module by using a module loader API, which was specified at the time of compilation, e.g., CommonJS, require.js, etc. | In namespace, there is no need for a module loader. Include the .js file of a namespace using the <script> tag in the HTML page. |
| 8. | A module can declare their dependencies. | Namespaces cannot declare their dependencies. |
| 9. | In modules, we can re-export some of their features either using their original name or rename it. | In namespaces, we cannot re-export their features or rename it. |
| 10. | Module Declaration: FileName: addition.ts export class Addition{ constructor(private x?: number, private y?: number){ } Sum(){ console.log("SUM: " +(this.x + this.y)); } } Accessing Modules: import {Addition} from './addition'; let addObject = new Addition(10, 20); addObject.Sum(); | Namespace Declaration: FileName: StoreCalc.ts namespace invoiceCalc { export namespace invoiceAccount { export class Invoice { public calculateDiscount(price: number) { return price * .60; } } } } Accessing Namespace: ///<reference path="./StoreCalc.ts"/> let invoice = new invoiceCalc.invoiceAccount.Invoice(); console.log("Output: "" +invoice.calculateDiscount(400)); |