title: Define global namespace/variable within a TypeScript module
body: <p>In TypeScript I can define a global/top-level namespace and use it in another file like so:</p>
  
  
  
  <pre class="lang-ts prettyprint-override"><code>namespace foo.blah {
      export function baz() {
          console.log('hello');
      }
  }
  </code></pre>
  
  <p>And in another file, this works:</p>
  
  <pre class="lang-ts prettyprint-override"><code>foo.blah.baz();
  </code></pre>
  
  <p>However, if I then import something from another module:</p>
  
  <pre class="lang-ts prettyprint-override"><code>import Thing from 'boo';
  
  namespace foo.blah {
      export function baz() {
          console.log('hello');
      }
  }
  </code></pre>
  
  <p>Suddenly my whole file is a module, the <code>foo.blah</code> namespace is local, not global, and the <code>foo.blah.baz()</code> call in the other file fails. <code>export namespace ...</code> just causes the namespace to become part of the module's export, not a global.</p>
  
  <p>Is there a way to write a TypeScript file which imports from other modules but also defines global/top-level symbols?</p>
  
  <p>At the moment I'm doing this:</p>
  
  <pre class="lang-ts prettyprint-override"><code>import Thing from 'boo';
  import * as $ from 'jquery';
  
  namespace foo.blah {
      export function baz() {
          console.log('hello');
      }
  }
  
  $.extend(true, window, {foo});
  </code></pre>
  
  <p>Which works, but the TypeScript compiler still can't see that <code>foo.blah...</code> exists as a global in other files.</p>
  
  <p>(The file is the entry point for Webpack, and I'm trying to import things from other modules in the Webpack bundle and assign them to globals so they can be used in <code>&lt;script&gt;</code> tags on the page.)</p>