TypeScript Namespaces

The namespace is a way which is used for logical grouping of functionalities. It encapsulates the features and objects that share common relationships. It allows us to organize our code in a much cleaner way.

A namespace is also known as internal modules. A namespace can also 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.

Note
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

We can create a namespace by using the namespace keyword followed by the namespace_name. All the interfaces, classes, functions, and variables can be defined in the curly braces{} by using the export keyword. The export keyword makes each component accessible to outside the namespaces. We can declare the namespace as below.

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

To access the interfaces, classes, functions, and variables in another namespace, we can use the following syntax.

snippet
namespaceName.className;
namespaceName.functionName;

If the namespace is in separate TypeScript file, then it must be referenced by using triple-slash (///) reference syntax.

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

Example

The following program helps us to understand the use of namespaces.

Create Project and Declare files

NameSpace file: studentCalc

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

Main File: app.ts

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

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

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

Compiling and Executing Namespaces

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

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

We will see the output below: studentCalc is not defined.

TypeScript Namespaces

So, the correct way to compile and execute the above code, we need to use the following command in the terminal window.

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

Now, we can see the following output.

TypeScript Namespaces

Nested Namespaces

A namespace also allows us to define one namespace into another namespace. We can access the members of the nested namespace by using the dot(.) operator. The following example helps us to understand the nested namespace more clearly.

Example

Nested NameSpace file: StoreCalc

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

Main File: app.ts

snippet
/// 

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

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

Now compile and execute the above code with the below command.

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

It produces the following output.

Output
Output: 240
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents