Working with Namespaces in TypeScript
Overview
When we sort and store household items, we keep all the medicinal products in a first aid box. Also, all the tools and equipment are stored in a toolbox, and fruits, and vegetables are in a refrigerator. This logical grouping is done to access these items effortlessly at the time of need. The same kind of principle applies with the help of a namespace. In TypeScript, namespaces are used to logically group related code to make the code appear less complex and readable.
What are Namespaces in TypeScript?
A TypeScript namespace is a way to group logically related code. It includes classes, interfaces, functions, and variables used to support a single or a group of related functionalities. A namespace is also known as an Internal module.
It is an inbuilt feature in TypeScript in which variable declarations go into a global scope and if multiple JavaScript files are used within the same project, there can be a possibility of overwriting the same variables that could lead to the Global Namespace Pollution Problem. A namespace can be used to create separate organizational units that can be used to hold multiple values like interfaces, types, classes, etc.
Namespaces can be used in the place where the module keyword was used when we have declared an internal module. This can be done to avoid confusion for new users by overloading them with similarly named terms.
Namespace Declaration
A namespace can be created by using the namespace keyword followed by the namespace_name. We can make use of the export keyword to define classes, interfaces, variables, and functions in the {}. The export keyword makes each component accessible outside the namespaces. The syntax to declare a namespace is as follows:
To access the class and the interface declared above in another namespace, we can use the following syntax:
If the namespace is in a separate TS file, then it has to be referenced by using triple-slash (///).
Example:
The following example will help to understand the uses of namespaces.
Namespace File: feesCalc
Main File: app.ts
Compiling and Executing Namespaces
Open the terminal and go to the location where the project has been stored and type the following command:
We will see in the command window that the file feesCalc is not defined.
Hence, the correct way to compile and execute the above code, we need to use the following command in the terminal window.
Now, we will see the following output in the terminal window.
Output:
Nested Namespaces
A namespace supports nesting i.e. we can define one namespace into another namespace. We can access the members of the nested namespace by using the dot(.) operator. We will be able to understand nested namespaces with the following example clearly.
Example:
Nested Namespace File: orderCalc
Main File: app.ts
Explanation:
In the above code snippet orderCalc, there is a namespace named orderCalc that holds another namespace order amount that contains a class Order and a function discountCalc for order amount calculation.
Now, we will compile and execute the above code with the below-given command:
Output:
Conclusion
- Namespaces encapsulate the features and the objects that share some common relationships and allow us to organize the code in a much more organized manner.
- Namespace is a good way to structure the code given in a web application, with all the dependencies included as <script> tags in an HTML document.
- A namespace can span multiple files and concatenate each file using the -outFile as the files were defined in one place. This makes the code cleaner and easier to maintain.
- As we need to build scalable and reusable TypeScript applications, Namespaces are handy as they improve the organization and structure of the application.
- When we declare modules, namespaces are used for concise type declarations.
- Namespaces in TypeScript is not just a compile-time feature, they can also change the resulting JavaScript code.