title: Understanding TypeScript and SystemJS WITHOUT Angular
body: <p>I've been researching and doing simple "hello worlds" with TypeScript recently. There is something I think I can't wrap my head around and that is how to use System.js with TypeScript. Every single tutorial or demo out there on the internet is about Angular2 and I don't want to get involved with Angular 2 yet.</p>
  
  <p>As an example, I have the following project structure:</p>
  
  <pre><code>RootFolder
  | 
  | _lib
  | ...... ts (where .ts files are)
  |
  | components (where compiled .js files are)
  | libraries
  | ......... systemjs (where system.js is)
  |
  | index.html
  | tsconfig.json
  </code></pre>
  
  <p>My tsconfig.json file is looking like:</p>
  
  <pre><code>{
    "compileOnSave": true,
    "compilerOptions": {
      "noImplicitAny": true,
      "noEmitOnError": true,
      "removeComments": false,
      "sourceMap": true,
      "target": "es5",
      "module": "system",
      "moduleResolution": "node",
      "outDir": "./components"
    },
    "exclude": [
      "node_modules",
      "wwwroot"
    ],
    "include": [
      "./_lib/ts/**/*"
    ]
  }
  </code></pre>
  
  <p>TypeScript compilation works as expected and there are no problems with that. I have created a simple class named "Alerter" contains the following code:</p>
  
  <pre><code>//alerter.ts
  class Alerter {
      showMessage(): void {
          alert("Message displayed.");
      }
  }
  
  export default Alerter
  </code></pre>
  
  <p>And an app.ts (which is my "main" application file) with the following code:</p>
  
  <pre><code>//app.ts
  import Alerter from "./alerter";
  
  console.log("app.js included &amp; executed");
  
  function test() {
      console.log("test called");
      const alt = new Alerter();
      alt.showMessage();
  };
  </code></pre>
  
  <p>And in my index.html I just want to import this app.js with System.js and simply want to call "test" function from the console. But it does not work. No matter what I did I simply can't access the function. I see the first console.log line being executed but when I try to call test() from chrome console it is undefined.</p>
  
  <p>If I remove the "alerter" class dependency from my main.ts everything works. Because compiled app.js only contains console.log calls and the function definition.</p>
  
  <p>Here is my System.js calls in index.html</p>
  
  <pre><code>System.config({
      packages: {
          "components": {
              defaultExtension: "js"
          }
      }
  });
  
  System.import("components/app");
  </code></pre>
  
  <p>I'm really desperate now and think I should simply go back to Jquery days. This is so simple yet can't make it work.</p>