title: Typescript Clientside Namespacing over Multiple Files
body: <p>I'm writing a modular API that is accessed from the client side browser, and for the sake of organization I'd like to have these split into multiple files. What I would like is for the implementation to look like this:</p>
  
  <pre><code>&lt;script src="dist/Api.js"&gt;&lt;/script&gt; &lt;-- Do I have to include all scripts?
  
  //Browser console
  var n = new Api();
  var m = new Api.NamespacedClass();
  var o = Api.property;
  </code></pre>
  
  <p>From what I've read on the documentation, it looks like the best way to do this is through <code>namespaces</code> and <em>not</em> <code>modules</code>, unless I'm supposed to do a combination of the two to get this working. </p>
  
  <pre><code>src/
  ├── models/
  │   ├── Person.ts
  │   ├── Thing.ts
  │   Api.ts
  </code></pre>
  
  <p><strong>Person.ts</strong></p>
  
  <pre><code>namespace Api {
      export class Person {
          public create() {}
      }
  }
  </code></pre>
  
  <p><strong>Thing.ts</strong></p>
  
  <pre><code>namespace Api {
      export class Thing {
          public create() {}
      }
  }
  </code></pre>
  
  <p><strong>Api.ts</strong></p>
  
  <pre><code>//Insert references here
  namespace Api {
      export class Api() { &lt;--- I know this doesn't work.
          public property:string;
          constructor() {}
      }
  }
  </code></pre>
  
  <p>I have no idea how to set up the correct structure. Any advice?</p>