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.
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.
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.
namespaceName.className; namespaceName.functionName;
If the namespace is in separate TypeScript file, then it must be referenced by using triple-slash (///) reference syntax.
/// < reference path = "Namespace_FileName.ts" />
The following program helps us to understand the use 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
Open the terminal and go to the location where you stored your project. Then, type the following command.
$ tsc --target es6 app.ts $ node app.js
We will see the output below: studentCalc is not defined.
So, the correct way to compile and execute the above code, we need to use the following command in the terminal window.
$ tsc --target es6 app.ts --outfile out.js $ node ./out.js
Now, we can see the following output.
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.
Nested NameSpace file: StoreCalc
namespace invoiceCalc {
export namespace invoiceAccount {
export class Invoice {
public calculateDiscount(price: number) {
return price * .60;
}
}
}
}Main File: app.ts
///let invoice = new invoiceCalc.invoiceAccount.Invoice(); console.log("Output: " +invoice.calculateDiscount(400));
Now compile and execute the above code with the below command.
$ tsc --target es6 app.ts --outfile out.js $ node ./out.js
It produces the following output.
