title: Typescript: How to import classes ("Uncaught ReferenceError")
body: <p>Im new at Typescript. I like the idea, that the compiler will point most errors out, because he really gets the code. Now I have made an test-project, no compiler errors, but an exception on runtime:</p>
  <p><strong>Uncaught ReferenceError: Boat is not defined(anonymous function) @ Main.ts:7</strong></p>
  <p>Obviously the imports do not work. But why? I tried with amd and with commonjs and got the same error.</p>
  <p>Here the code:</p>
  <p><strong>index.html</strong></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;TypeScript Test&lt;/title&gt;
      &lt;script data-main=&quot;main&quot; type=&quot;text/javascript&quot; src=&quot;require.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;span id=&quot;output&quot;&gt;&lt;/span&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><strong>Main.ts</strong></p>
  <pre><code>///&lt;reference path='Vehicle.ts'/&gt;
  ///&lt;reference path='Car.ts'/&gt;
  ///&lt;reference path='Boat.ts'/&gt;
  
  var outputElement = document.getElementById('output');
  
  var vehicleOne: Vehicle.Vehicle = new Boat.Boat(&quot;One&quot;);
  var car: Car.Car = new Car.Car(&quot;Two&quot;);
  var vehicleTwo: Vehicle.Vehicle = car;
  
  outputElement.innerHTML = vehicleOne.do() + &quot; &quot; + vehicleOne.getName() + &quot;&lt;br /&gt;&quot;
                          + vehicleTwo.do() + &quot; &quot; + vehicleTwo.getName() + &quot;&lt;br /&gt;&quot;
                          + car.do() + &quot; &quot; + car.getName() + &quot; &quot; + car.doCar() + &quot;&lt;br /&gt;&quot;;
  </code></pre>
  <p><strong>Vehicle.ts</strong></p>
  <pre><code>module Vehicle{
  
      export class Vehicle
      {
          private name: string;
  
          constructor (name: string)
          {
              this.name = name;
          }
  
          do() : string
          {
              return &quot;Im a vehicle&quot;;
          }
  
          getName() : string
          {
              return this.name;
          }
      }
  
  }
  </code></pre>
  <p><strong>Car.ts</strong></p>
  <pre><code>///&lt;reference path='Vehicle.ts'/&gt;
  
  module Car {
  
      export class Car extends Vehicle.Vehicle {
          constructor(name:string) {
              super(&quot;CAR: &quot; + name);
          }
  
          do():string {
              return &quot;Im a car&quot;;
          }
  
          doCar():string {
              return &quot;Only cars can do this :)&quot;;
          }
      }
  
  }
  </code></pre>
  <p><strong>Boat.ts</strong></p>
  <pre><code>///&lt;reference path='Vehicle.ts'/&gt;
  
  module Boat {
  
      export class Boat extends Vehicle.Vehicle {
          constructor(name:string) {
              super(&quot;BOAT &quot; + name);
          }
  
          do():string {
              return &quot;Im a boat&quot;;
          }
      }
  
  }
  </code></pre>
  <p>I use Webstorm, the compiler outputs no errors, and the *.js and *.map.js files are created. In the browser there is no output. Only the console prints &quot;Uncaught ReferenceError: Boat is not defined(anonymous function) @ Main.ts:7&quot;</p>
  <p>Why this exception? How do I import the classes correctly?</p>