TypeScript Namespaces Tutorial

In this TypeScript tutorial we learn how to group our code even further by using namespaces.

We learn how to declare a namespace and how to access members from a namespace inside the current file or an external file.

Lastly, we learn how to compile multiple TypeScript files into a single Javascript file.

Here's a table of contents of what you'll learn in this lesson:
(click on a link to skip to its section)

Let's jump right in.

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.

Syntax:
namespace NamespaceName {

	// classes & interfaces
	// go in here
}
Example:
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.

Example:
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.

Syntax:
 Namespace.Class;
Example:
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.

Syntax:
 /// <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.

Example: ref-demo.ts'
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.

Example: main.ts
 /// <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.

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

// access class in a
// namespace in 'ref-demo.ts'
var 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.

Syntax:
 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.

Example:
 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.