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

How do I get jQuery to work in my Typescript files?

本文关键字：Typescript 文件 工作 我的 jQuery      更新时间：2023-09-26

我不明白为什么我的jQuery不能在Typescript文件中工作
我没有任何错误。只是没有反应。当我用class="test"点击div时，什么都不会发生，app.component.ts中的console.log也不会打印到控制台。我被难住了。

以下是我的文件夹结构。感谢您的帮助。感谢

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

以下是我的主要.ts

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

以下是我的应用程序组件。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.json

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

以下是我的打字员.json

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

使用JQuery.Of('.test') 而不是$('.test')

相关文章：