How do I get jQuery to work in my Typescript files?
<p>I don't understand why my jQuery doesn't work in my Typescript files.<br>
I don't get any errors. It's just non-responsive. When I click on the div with the class="test" nothing happens and the console.log in the app.component.ts does not print to the console. I'm stumped.</p>

<p>The following is my folder structure. Any help is appreciated. Thanks</p>

<pre><code>    --app
    ----app.component.ts
    ----main.ts
    --node_modules
    --typings
    --index.html
    --jquery.d.ts
    --package.json
    --tsconfig.json
    --typings.json
</code></pre>

<p>The following is my main.ts</p>

<pre><code>    import {bootstrap}    from 'angular2/platform/browser';
    import {AppComponent} from './app.component';

    bootstrap(AppComponent);
</code></pre>

<p>The following is my app.component.ts</p>

<pre><code>    /// &lt;reference path="../jquery.d.ts" /&gt;
    import {Component} from 'angular2/core';

    declare var $: Function;

    @Component({
      selector: 'my-app',
      template: `&lt;h1&gt;My First Angular 2 App&lt;/h1&gt;
                 &lt;div class="test"&gt;TEST&lt;/div&gt;`
    })
    export class AppComponent {}

    $('.test').click(function(){
    $('.test').hide();
    console.log('testing');
    });
</code></pre>

<p>The following is my index.html file</p>

<pre><code>     &lt;html&gt;
       &lt;head&gt;
         &lt;title&gt;Angular 2 QuickStart&lt;/title&gt;
         &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
         &lt;link rel="stylesheet" href="styles.css"&gt;

         &lt;!-- 1. Load libraries --&gt;
         &lt;!-- IE required polyfills, in this exact order --&gt;
         &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
         &lt;script src="node_modules/es6-shim/es6-shim.min.js"&gt;&lt;/script&gt;
         &lt;script src="node_modules/systemjs/dist/system-polyfills.js"&gt;  &lt;/script&gt;
         &lt;script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"&gt;&lt;/script&gt;

         &lt;script src="node_modules/angular2/bundles/angular2-polyfills.js"&gt;&lt;/script&gt;
         &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
         &lt;script src="node_modules/rxjs/bundles/Rx.js"&gt;&lt;/script&gt;
         &lt;script src="node_modules/angular2/bundles/angular2.dev.js"&gt;&lt;/script&gt;

         &lt;!-- 2. Configure SystemJS --&gt;
         &lt;script&gt;
           System.config({
             packages: {
             app: {
             format: 'register',
             defaultExtension: 'js'
             }
           }
         });
         System.import('app/main')
           .then(null, console.error.bind(console));
         &lt;/script&gt;
        &lt;/head&gt;

        &lt;!-- 3. Display the application --&gt;
        &lt;body&gt;
          &lt;my-app&gt;Loading...&lt;/my-app&gt;
        &lt;/body&gt;
       &lt;/html&gt;
</code></pre>

<p>The following is my tsconfig.json</p>

<pre><code>  {  
   "compilerOptions": {
   "target": "es5",
   "module": "system",
   "moduleResolution": "node",
   "sourceMap": true,
   "emitDecoratorMetadata": true,
   "experimentalDecorators": true,
   "removeComments": false,
   "noImplicitAny": false
  },
   "exclude": [
   "node_modules",
   "typings/main",
   "typings/main.d.ts"
   ]
  }
</code></pre>

<p>The following is my typings.json</p>

<pre><code>{
 "ambientDependencies": {
 "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
 "jasmine": "registry:dt/jasmine#2.2.0+20160412134438"
 }
}
</code></pre>