Use ES6 imports/exports with a bundler, for example with webpack.

Code

// File TestClassA.ts

import TestClassB from './TestClassB';

export default class TestClassA {
  private test: TestClassB;
  constructor() {
    this.test = new TestClassB();
  }
}

// File TestClassB.ts

export default class TestClassB {
  private value: string;
  constructor() {
    this.value = 'test';
  }
}

Configuration

// File tsconfig.json

{
  "compilerOptions": {
    // ...
    "module": "commonjs",
    "noEmit": true
  }
  // ...
}

// File webpack.config.js

var path = require("path");

module.exports = {
  entry: path.join(__dirname, "TestClassA.ts"),
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  resolve: {
    extensions: ["", ".webpack.js", ".web.js", ".ts", ".js"]
  },
  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: "ts",
        query: {
          "compilerOptions": {
            "noEmit": false
          }
        }
      }
    ]
  }
};

Notice: See the link upstairs to understand this configuration.

Commands

# Install (to run once)
npm install -g webpack typescript
npm install ts-loader typescript

# Make the bundle
webpack

As Paleo suggested, the preferred way of separating code into multiple files is by using modules instead of namespaces. I've been in your shoes, namespaces are indeed better suited for creating a compiled concatenated output, but it's simply ignored by both the developers and most of the community.

For non-trivial projects you are basically forced to use modules, for which the preferred syntax is the ES6 syntax:

import { ... } from "./path/to/module-file";

This will have to be handled by either an ES6 browser, a module loading system for <ES6 browsers (RequireJS), or the NodeJS built-in module loading system. Modules certainly have their advantages, but they are not an obvious replacement for namespaces.

However, there is one theoretical solution I know: if you have a designated root file, and your namespace structure reflects the directory layout (eg.: namespace Test.Helpers is in the folder test/helpers, see below linked question), it's easy to write a tool that recursively scans your files for import X = ... statements, and then creates a _references.ts file containing the ordered list of reference paths. Something similar should be done by the TypeScript compiler, but it is not.

• TypeScript dependencies in compiled output are not resolved in the correct order

When compiling in visual studio, this _references.ts file is automatically recognized and passed to the compiler, but AFAIK, you can manually pass that file to the compiler as well, simply by:

tsc _references.ts --out test.js

Which will then also compile the files referenced within.

I was using this approach myself with a custom-made ~200 line bundling program written in C# before switching to the ES6 module import syntax. There are a few caveats you have to watch out for:

• import X = ... statements can use a relative path from any namespace when multiple namespaces are nested. You either need to force yourself to using absolute namespace names only, or handle all cases.
• Circular dependencies must be checked for.
• Possibly more that I didn't encounter...