title: Importing JavaScript files in Typescript, unable to access functions in TS, able to access them in html
body: <p>I recently started integrating TypeScript and React with my companies legacy JavaScript code base. It's been very hit and miss, as I'm sure many of you understand.</p>
  
  <p>After overcoming many of the big hurdles such as setting up a proper webpack process, understanding and setting up tsconfig files and breaking up the bundling properly, I've finally integrated it all with our current CI-pipeline.</p>
  
  <p>However, now I'm having an issue with importing JavaScript libraries in my TypeScript code. I know it's bad practice, but it's sort of a middle-hand before moving to becoming fully TS-compliant.</p>
  
  <p>I've got this basic component which builds fine:</p>
  
  <pre><code>import * as React from "react";
  import * as ReactDOM from "react-dom";
  import { Header } from "./components/header";
  import * as $C from "./../../fortress.content.js";
  import * as $F from "./../../fortress.js"; 
  
  let url : string  = $F.writeUrl("Account", "LoginAjax");
  
  ReactDOM.render(
      &lt;div&gt;
          &lt;div&gt; {url} &lt;/div&gt;
      &lt;/div&gt;,  
      document.getElementById("body")
  );
  </code></pre>
  
  <p><code>$F.writeUrl</code> allows us to essentially create a string based on a webconfig file in the root of the project, so basically a function taking a few different parameters and returning a string based on it:</p>
  
  <p>However, when I run the transpiled JavaScript in a baremetal html file:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;div id="body"&gt;&lt;/div&gt;
  &lt;div id="header"&gt;&lt;/div&gt;
  &lt;body&gt; 
      &lt;script src="js/jquery-2.1.4.min.js"&gt;&lt;/script&gt; 
      &lt;script src="js/react-0.14.3.js"&gt;&lt;/script&gt;
      &lt;script src="js/react-dom-0.14.3.js"&gt;&lt;/script&gt; 
      &lt;script src="js/filemanager/filemanager.bundle.js"&gt;&lt;/script&gt;
      &lt;script src="js/anothermanager/anothermanager.bundle.js"&gt;&lt;/script&gt;
      &lt;script&gt;  
              console.log("$F: ", $F);
              console.log("$C: ", $C);
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I get these errors:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'bind' of undefined
      at new t (filemanager.bundle.js:1)
      at ReactCompositeComponentWrapper.mountComponent (react.js:5504)
      at ReactCompositeComponentWrapper.wrapper [as mountComponent] (react.js:12346)
      at Object.mountComponent (react.js:12971)
      at ReactDOMComponent.mountChildren (react.js:11685)
      at ReactDOMComponent._createContentMarkup (react.js:6817)
  
  anothermanager.bundle.js:1 Uncaught ReferenceError: $C is not defined
      at anothermanager.bundle.js:1
      at Object.&lt;anonymous&gt; (anothermanager.bundle.js:1)
      at n (anothermanager.bundle.js:1)
      at Object.&lt;anonymous&gt; (anothermanager.bundle.js:1)
      at n (anothermanager.bundle.js:1)
      at anothermanager.bundle.js:1
      at anothermanager.bundle.js:1
      at ReactDOMComponent.mountComponent (react.js:6705)
      at Object.mountComponent (react.js:12971)
      at ReactCompositeComponentWrapper.mountComponent (react.js:5581)
      at ReactCompositeComponentWrapper.wrapper [as mountComponent] (react.js:12346)
  
  index.html:17 Uncaught ReferenceError: $F is not defined
      at index.html:17
  </code></pre>
  
  <p>So I tried changing this to instantiate <code>$C</code> and <code>$F</code> in my TS:</p>
  
  <pre><code>let test = $F;
  let test2 = $C;
  </code></pre>
  
  <p>This removed the above errors and actually shows me the <code>$F</code> and <code>$C</code> objects in my console log. But the problem now is that the $F.writeUrl("Account", "LoginAjax") is blowing as Chrome won't recognise it as a "function".</p>
  
  <p>Have I done anything wrong with my imports? </p>