The TypeScript Namespace is used to make the same group of code in an organized way, which can reduce the same type function from different files.
In many programming languages like java, we can use some inbuilt namespace or can create a namespace and define some function there, and exporting the function from the namespace we can use the function from another file.
To create a namespace first create a typescript file and then write the keyword namespace and then provide a name of the namespace like as a class name and then create a bloc of the namespace or area by providing an opening and closing curly bracket, The curly bracket surrounded area is the block of the namespace. and inside the namespace area, you can write classes, functions, or interfaces but have to provide an export keyword before the function or interface, else you can not be able to access that outside of the namespace.
Let’s understand with an example: for that, We are going to create two TypeScript Files one is app.ts which we are going to call the namespace, and going to use the function of the namespace. and another file named studentFeesCalc.ts and inside that going to define the namespace and a function with export keyword to calculate the total fees of a student.
Example of studentFeesCalc.ts
namespace studentFeesCalc{
export function studentsAnualFees(monthlyFees:number){
return monthlyFees*12;
}
}Now we can use the namespace from any files and for that, we have to use tiple slash reference to include the namespace file. the writing style of tiple slash reference is first you have to provide tiple slash then the angle bracket opens then the keyword reference then the path and inside double or single quotation the path of the namespace file is followed by an equal sign.
Now you can access the function of the namespace by the namespace name and then the function name of the namespace followed by a dot and inside the parenthesis, you can pass some values.
Example of app.ts file:
/// <reference path = "studentFeesCalc.ts">
let stdAnualFees = studentFeesCalc.studentsAnualFees(500);
console.log(stdAnualFees); // The output will be 6000Note: You can declare and use a namespace in the same file.
And if you are declaring the namespace and using the namespace in the same file then you do not need the tiple slash referrance.
If you have declared the namespace in a file and using it from a different file then you have to use tiple slash reference and also you may need to use the command to marge the code in a single output file during compilation. or you have to include both the files generated during compilation while using in an HTML file.
To generate an out file, in this case, the command will be:
$ tsc –target es6 app.ts –outFile out.js
Nested Namespace of TypeScript:
You can use a number of namespaces inside a namespace also, the namespace inside a namespace is called a nested namespace, but in this case, you have to export the child namespace. But while we are calling the namespace we have to use the name of the parent namespace and then chield namespace followed by a dot and so on, and then the function name followed by a dot. and in the file where we are including have to use a tiple slash reference.
Let’s understand that by an example and for that we are going to create a file studentsFile.ts for the nested namespace and another file studentsApp.ts for use of the namespace.
Example of studentsFile.ts:
namespace studentsFileLog{
export namespace studentsFeesFile{
export function studentsAnualFees(monthlyFees:number){
return monthlyFees*12;
}
}
}Example of studentsApp.ts
/// <reference path = "studentsFile.ts">
let stdAnualFees = studentsFileLog.studentsFeesFile.studentsAnualFees(1000);
console.log(stdAnualFees); // The output will be 12000Note: A TypeScript Namespace can be said an internal module.