TypeScript Namespaces

A namespace serves as a method for the logical categorization of functionalities. It encapsulates features and objects that are related to one another. This organization enables us to structure our code in a significantly more orderly manner.

A namespace, often referred to as internal modules, can encompass interfaces, classes, functions, and variables to facilitate a set of related functionalities.

In contrast to JavaScript, TypeScript incorporates namespaces as a fundamental feature. JavaScript variable declarations reside in the global scope. When multiple JavaScript files are utilized within a single project, there is a risk of confusing novice users due to the potential for name conflicts. Therefore, TypeScript namespaces effectively eliminate these naming collisions.

NOTE: A namespace can span in multiple files and allow to concatenate each file using " -outFile " as they were all defined in one place. It makes the code easier to maintain.

Namespace Declaration

A namespace can be established by employing the namespace keyword succeeded by the namespace_name. All interfaces, classes, functions, and variables can be specified within the curly braces {} using the export keyword. This export keyword enables each element to be accessible from outside the namespace. The namespace can be declared as follows.

namespace <namespace_name> {
               export interface I1 { }
               export class c1{ }
}

In order to utilize the interfaces, classes, functions, and variables from a different namespace, the subsequent syntax can be employed.

namespaceName.className;
namespaceName.functionName;

When the namespace is located in a different TypeScript file, it needs to be included using the triple-slash (///) reference syntax.

/// < reference path = "Namespace_FileName.ts" />

Example

The subsequent program aids in comprehending the application of namespaces.

Create Project and Declare files

NameSpace file: studentCalc

namespace studentCalc{
	export function AnualFeeCalc(feeAmount: number, term: number){
	return feeAmount * term;
	}
}

Main File: app.ts

/// <reference path = "./studentCalc.ts" />

let TotalFee = studentCalc.AnualFeeCalc(1500, 4);

console.log("Output: " +TotalFee);

Compiling and Executing Namespaces

Launch the terminal and navigate to the directory where your project is saved. After that, enter the subsequent command.

$ tsc --target es6 app.ts
$ node app.js

The output displayed will be: studentCalc is undefined.

To properly compile and run the code mentioned above, one should utilize the subsequent command within the terminal window.

$ tsc --target es6 app.ts --outfile out.js
$ node ./out.js

Now, we can see the following output.

Nested Namespaces

A namespace enables the definition of one namespace within another. To access the elements of the inner namespace, the dot (.) operator can be utilized. The example below illustrates the concept of nested namespaces more effectively.

Example

Nested NameSpace file: StoreCalc

namespace invoiceCalc { 
   export namespace invoiceAccount { 
      export class Invoice { 
         public calculateDiscount(price: number) { 
            return price * .60; 
         } 
      } 
   } 
}

Main File: app.ts

/// <reference path = "./StoreCalc.ts" />

let invoice = new invoiceCalc.invoiceAccount.Invoice(); 

console.log("Output: " +invoice.calculateDiscount(400));

Proceed to compile and run the aforementioned code using the command provided below.

$ tsc --target es6 app.ts --outfile out.js
$ node ./out.js

It produces the following output.

Output: 240