TypeScript Namespaces Tutorial

What is a namespace

A namespace helps us organize our applications and avoid name clashing.

In a typical application, we separate our code into smaller sections of logic, like classes. A namespace encloses one or more classes, grouping them.

Everything in a namespace will be of that namespace. If a project contains more than one class with the same name but different namespaces, the names will not clash.

How to declare a namespace

To declare a namespace, we use the namespace keyword, followed by its identifier and a code block.

namespace NamespaceName {

	// classes & interfaces
	// go in here
}

namespace ConsoleMessage {

  class Message {

    Hello() {
      console.log("Hello there")
    }
    Bye() {
      console.log("Goodbye")
    }
  }
}

If we want to use a class or interface outside of the namespace, we mark them with the export keyword.

namespace ConsoleMessage {

  export class Message {

    Hello() {
      console.log("Hello there")
    }
    Bye() {
      console.log("Goodbye")
    }
  }
}

How to access a class or interface in a namespace

To access a namespace member, we use dot notation, similar to how we would use the members of a class.

 Namespace.Class

namespace ConsoleMessage
{
  export class Message
  {
    Hello() {
      console.log("Hello there")
    }
    Bye() {
      console.log("Goodbye")
    }
  }
}

// access 'Message' class through
// 'ConsoleMessage' namespace
var msg = new ConsoleMessage.Message()

msg.Hello();

How to access a namespace from another file

Typically, we won’t write our application in one single file. Our project will be organized into several folders, containing one or more files that relate to it.

To reference a namespace in another .ts file, we use triple slash reference syntax. Simply put, we use a reference tag prefixed with three slashes.

 /// <reference path = "filename.ts" />

Let’s do an example:

Create another file in your ‘LearningTS’ directory called ref-demo.ts and add the following code.

namespace ConsoleMessage
{
  export class Message
  {
    Hello() {
      console.log("Hello there")
    }
    Bye() {
      console.log("Goodbye")
    }
  }
}

The code in the example above is just our namespace with a simple class.

Now in your main.ts file, add a reference to the ref-demo.ts file.

 /// <reference path = "ref-demo.ts" />

Now, whatever is in ref-demo.ts is available to use in the main.ts file so let’s access the class inside the namespace.

/// <reference path = "ref-demo.ts" />

// access class in a
// namespace in 'ref-demo.ts'
let msg = new ConsoleMessage.Message()

msg.Hello()

If we compile the files and run main.js , we’ll get an error that ‘ConsoleMessage is not defined’. We have to combine the two into one file with a compiler flag.

How to compile multiple TypeScript files into a single Javascript file

To combine multiple files into one, we add the compiler flag --outFile to our compile command.

The code from both .ts files will be combined and placed into a js output file, so after the flag we specify that .js file. Then, we add the two .ts files we want to combine.

 tsc --outFile combined_js_file.js filename1.ts filename2.ts

In our case, we want to combine main.ts and ref-demo.ts into the main.js file so the command would look like this.

 tsc --outFile main.js main.ts ref-demo.ts

Now when we run main.js , the words “Hello there” should print to the console.

Summary: Points to remember

• Namespaces group our code even further to help organize our code and avoid name clashing.
• We declare a namespace with the namespace keyword.
• To access a namespace member we use dot notation.
• To access a namespace in another file we use triple slash reference syntax.
• To compile multiple .ts files into one .js file, we use the --outFile compiler flag.