title: How can typescript import external modules in a web worker
body: <p>I am trying to use external modules in typescript in a web worker and am having problems. All the code for a test example is at <a href="http://www.windward.net/temp/WebWorkerRequireJs.zip" rel="nofollow">www.windward.net/temp/WebWorkerRequireJs.zip</a> (key ones listed below).</p>
  
  <p>The typescript I want (and this works fine in the main thread is:</p>
  
  <pre><code>import myClass = require('my-class');
  class WorkerThread {
  }
  self.onmessage = function (e) {
      console.log("client received message = " + e.data);
      var mc = new myClass.MyClass();
      console.log("worker thread toUpper = " + mc.toUpper("dave"));
      self.postMessage("from client");
  }
  </code></pre>
  
  <p>This generates the following javascript which fails as define is not defined:</p>
  
  <pre><code>define(["require", "exports", 'my-class'], function(require, exports, __myClass__) {
      var myClass = __myClass__;
  
      var WorkerThread = (function () {
          function WorkerThread() {
          }
          return WorkerThread;
      })();
      self.onmessage = function (e) {
          console.log("client received message = " + e.data);
          var mc = new myClass.MyClass();
          console.log("worker thread toUpper = " + mc.toUpper("dave"));
          self.postMessage("from client");
      };
  });
  //# sourceMappingURL=worker-thread.js.map
  </code></pre>
  
  <p>So step 1, I added importScripts and called this .js file:</p>
  
  <pre><code>importScripts('../../scripts/require.js');
  
  define(["require", "exports", 'my-class'], function(require, exports, __myClass__) {
      var myClass = __myClass__;
  
      var WorkerThread = (function () {
          function WorkerThread() {
          }
          return WorkerThread;
      })();
      self.onmessage = function (e) {
          console.log("client received message = " + e.data);
          var mc = new myClass.MyClass();
          console.log("worker thread toUpper = " + mc.toUpper("dave"));
          self.postMessage("from client");
      };
  });
  //# sourceMappingURL=worker-thread.js.map
  </code></pre>
  
  <p>This did not work and gave the error:</p>
  
  <pre><code>Uncaught Error: Mismatched anonymous define() module: function (require, exports, __myClass__) {
      var myClass = __myClass__;
  
      var WorkerThread = (function () {
          function WorkerThread() {
          }
          return WorkerThread;
      })();
      self.onmessage =...&lt;omitted&gt;...ch 
  </code></pre>
  
  <p>I then switched "define" to "require" and this worked:</p>
  
  <pre><code>importScripts('../../scripts/require.js');
  
  require(["require", "exports", 'my-class'], function(require, exports, __myClass__) {
      debugger;
      var myClass = __myClass__;
  
      var WorkerThread = (function () {
          function WorkerThread() {
          }
          return WorkerThread;
      })();
      self.onmessage = function (e) {
          console.log("client received message = " + e.data);
          var mc = new myClass.MyClass();
          console.log("worker thread toUpper = " + mc.toUpper("dave"));
          self.postMessage("from client");
      };
  });
  //# sourceMappingURL=worker-thread.js.map
  </code></pre>
  
  <p>Which leads to the question - how do I get typescript to generate this so it runs. Is the solution to set up a main javascript file that is the initial web worker app that then calls the typescript part? And if so, how do I set that up?</p>
  
  <p>Or is the solution to somehow tell the typescript compiler to change from define to require and insert importScripts()?</p>
  
  <p><strong>Update:</strong> It looks like a (best?) solution is the main web worker file is a javascript file. That has the importScripts() and a require of the main typescript class. You create that class and it runs from there. And at that point the typescript "import" which cuses "define" all works. So far...</p>