TypeScript - Namespace Demo

Namespaces are great for organizing and encapsulating your code. If you code spans across multiple namespaces (files), you need to:

• a) export your namespaces so they can be accessible to other namespaces
• b) (preferred) compile them down into a single file or you will need to remember to make references to all js files (containing those namespaces) involved

Use export to make publicly accessible and reference to locate these namespaces from other files.

Exporting: To access namespaces within other namespaces, you need to prefix the namespaces which should be exposed with a export keyword. This will allow other namespaces to have public access to them. This works very much like importing namespaces in c#.

Referencing your Exports: Unless you define your namespaces in the same file like shown in the first image below (and you most likely will NOT), you will need to add reference tags in your consuming code to tell TypeScript where it can locate this other code.

Finally, this is common sense but I'll state it anyways. We need to make sure all of our compiled code gets loaded into the browsers. In this example, we need to not only load namespaces.js, but we also need to load federation.js and klingon.js.

Tip - if you want to combine all required js files into one single one (klingon, federation, and namespaces/battleground) like "battleground.js" or something, you can using -output file. See this page: https://www.typescriptlang.org/docs/handbook/namespaces.html .