We have introduced usage of namespace with an example in our previous blog post:
https://sashankexpresstech.blogspot.com/2018/11/typescript-namespaces-introductory.html
Consider a scenario, whereby the namespace is really huge and we would like to better organize it splitting into multiple files. In such a case, TypeScript provides us a facility by which we can hold the same namespace in multiple files.
In the previous example, we were calculating the areas of circle and square and we grouped them in one namespace:
myArea.
Let us now split the namespace information of
myArea in to two files:
circleArea.ts
namespace myArea {
const PI = Math.PI;
export function circleArea(radius: number){
return PI*radius*radius;
}
}
squareArea.ts
namespace myArea {
export function squareArea(sideLength:number){
return sideLength*sideLength;
}
}
the code that remains in
app.ts is:
console.log(myArea.circleArea(5));
console.log(myArea.squareArea(5));
Now, if we compile:
$ tsc
$ ls -l *.js
-rw-r--r-- 1 ubuntu ubuntu 84 Nov 15 15:03 app.js
-rw-r--r-- 1 ubuntu ubuntu 211 Nov 15 15:03 circleArea.js
-rw-r--r-- 1 ubuntu ubuntu 196 Nov 15 15:03 squareArea.js
Now, if we open the browser on
localhost and check the console:
Uncaught ReferenceError: myArea is not defined
at app.js:2
We have received the above error. This is because,
myArea is not defined in
app.js file - which is the file included in our
index.html page. To solve this problem there are two techniques:
Technique 01:
First technique involves, including all the JavaScript files inside the
index.html file. We will include them in the body of our index.html file as follows:
<body>
<script src="./circleArea.js"></script>
<script src="./squareArea.js"></script>
<script src="./app.js"></script>
</body>
Please note that the order of the JavaScript file placement matters. This is because, the definitions of the namespace should come before its usage. Hence, we have placed the
app.js file at the bottom.
Now, if we check the console output:
78.53981633974483
25
Technique 02:
We also have another technique in which we can combine the multiple JavaScript files into a single file using the
--outFile compiler option provided with
tsc. Let us use this technique as mentioned in the link:
https://www.typescriptlang.org/docs/handbook/namespaces.html#splitting-across-files
For this let us first edit our index.html file to include only the app.js file:
<body>
<script src="./app.js"></script>
</body>
Now, we will combine the TypeScript files to a single JavaScript file using the
--outFile compiler option:
$ tsc --outFile app.js circleArea.ts squareArea.ts app.ts
This will combine the 3
.ts files into a single JavaScript file:
$ ls -l *.js
-rw-r--r-- 1 ubuntu ubuntu 449 Nov 15 15:36 app.js
Now, let us start the web server:
$ python -m SimpleHTTPServer 3000
Serving HTTP on 0.0.0.0 port 3000 ...
127.0.0.1 - - [15/Nov/2018 15:44:24] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [15/Nov/2018 15:44:24] "GET /app.js HTTP/1.1" 200 -
Check the console in the browser on localhost:3000. The console output is:
This covers the techniques for splitting a namespace into multiple files and then using them.
Reference:
