如何讓jQuery在我的Typescript文件中工作？

我不明白爲什麼我的jQuery不能在我的Typescript文件中工作。
我沒有得到任何錯誤。這只是無響應。當我點擊class =「test」的div時，沒有任何反應，並且app.component.ts中的console.log不會打印到控制檯。我很難過。如何讓jQuery在我的Typescript文件中工作？

以下是我的文件夾結構。任何幫助表示讚賞。由於

--app 
    ----app.component.ts 
    ----main.ts 
    --node_modules 
    --typings 
    --index.html 
    --jquery.d.ts 
    --package.json 
    --tsconfig.json 
    --typings.json

以下是我main.ts

import {bootstrap} from 'angular2/platform/browser'; 
    import {AppComponent} from './app.component'; 

    bootstrap(AppComponent);

以下是我app.component.ts

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

    declare var $: Function; 

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

    $('.test').click(function(){ 
    $('.test').hide(); 
    console.log('testing'); 
    });

以下是我的index.html文件

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

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

     <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> 
     <script src="node_modules/systemjs/dist/system.src.js"></script> 
     <script src="node_modules/rxjs/bundles/Rx.js"></script> 
     <script src="node_modules/angular2/bundles/angular2.dev.js"></script> 

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

     <!-- 3. Display the application --> 
     <body> 
      <my-app>Loading...</my-app> 
     </body> 
     </html>

以下是我的tsconfig.j兒子

{ 
    "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" 
    ] 
    }

以下是我typings.json

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

來源

2016-05-01 Chad Kerr

你是什麼意思「不工作」？你是否收到任何錯誤訊息？你沒有看到什麼預期的行爲？ –

我沒有得到任何錯誤。這只是無響應。當我點擊class =「test」的div時，沒有任何反應，並且app.component.ts中的console.log不會打印到控制檯。我很難過。 –

@ChadKerr，任何控制檯錯誤？ –

代替$('.test')使用JQuery.Of('.test')

來源

2016-05-01 15:35:55 Ray

謝謝。現在我收到一個錯誤，Property'Of'在類型'function'上不存在。我需要如此聲明嗎？「聲明var JQuery：Function;」 –

是不是jQuery（區分大小寫）？ –

@AndreasL。我將JQuery更改爲jQuery，但仍然沒有迴應。不過謝謝。 –

如何讓jQuery在我的Typescript文件中工作？

回答

相關問題