Javascript 在TypeScript中使用jQuery（在angular 2项目中）

嗨，我已经在我的一个.ts angular组件中编写了一些jQuery，但是我似乎无法让它工作。我想让一张桌子可以滚动。这是jQuery

var $table = $('table.users'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;

    // Adjust the width of thead cells when window resizes
    $(window).resize(function() {
    // Get the tbody columns width array
    colWidth = $bodyCells.map(function() {
        return $(this).width();
    }).get();

    // Set the width of thead columns
    $table.find('thead tr').children().each(function(i, v) {
        $(v).width(colWidth[i]);
    });
}).resize();`

我对这一切都不熟悉，所以我真的不知道如何让它工作。我已经写信了

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>

但我得到的信息是：

angular-quickstart@1.0.0 C:\GitHub\scrum_project_fronted
+-- UNMET PEER DEPENDENCY @angular/common@2.4.3
+-- UNMET PEER DEPENDENCY @angular/compiler@2.4.3
+-- UNMET PEER DEPENDENCY @angular/core@2.4.3
+-- UNMET PEER DEPENDENCY @angular/forms@2.4.3
`-- @types/node@6.0.61

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.17: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN ng2-table@1.3.2 requires a peer of @angular/common@~2.0.0 but none was installed.
npm WARN ng2-table@1.3.2 requires a peer of @angular/compiler@~2.0.0 but none was installed.
npm WARN ng2-table@1.3.2 requires a peer of @angular/core@~2.0.0 but none was installed.
npm WARN ng2-table@1.3.2 requires a peer of @angular/forms@~2.0.0 but none was installed.

package.json：

{
    "name": "angular-quickstart",
    "version": "1.0.0",
    "description": "QuickStart package.json from the documentation, supplemented with testing support",
    "scripts": {
        "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
        "e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
        "lint": "tslint ./app/**/*.ts -t verbose",
        "lite": "lite-server",
        "pree2e": "webdriver-manager update",
        "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
        "test-once": "tsc && karma start karma.conf.js --single-run",
        "tsc": "tsc",
        "tsc:w": "tsc -w"
    },
    "keywords": [],
    "author": "",
    "license": "MIT",
    "dependencies": {
        "@angular/common": "~2.4.0",
        "@angular/compiler": "~2.4.0",
        "@angular/core": "~2.4.0",
        "@angular/forms": "~2.4.0",
        "@angular/http": "~2.4.0",
        "@angular/platform-browser": "~2.4.0",
        "@angular/platform-browser-dynamic": "~2.4.0",
        "@angular/router": "~3.4.0",
        "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.18",
        "@types/jquery": "^2.0.39",
        "angular-in-memory-web-api": "~0.2.4",
        "core-js": "^2.4.1",
        "ng2-table": "^1.3.2",
        "rxjs": "5.0.1",
        "systemjs": "0.19.40",
        "zone.js": "^0.7.4"
    },
    "devDependencies": {
        "@types/jasmine": "^2.5.36",
        "@types/jquery": "^2.0.39",
        "@types/node": "^6.0.61",
        "canonical-path": "0.0.2",
        "concurrently": "^3.1.0",
        "http-server": "^0.9.0",
        "jasmine-core": "~2.4.1",
        "karma": "^1.3.0",
        "karma-chrome-launcher": "^2.0.0",
        "karma-cli": "^1.0.1",
        "karma-jasmine": "^1.0.2",
        "karma-jasmine-html-reporter": "^0.2.2",
        "lite-server": "^2.2.2",
        "lodash": "^4.16.4",
        "protractor": "~4.0.14",
        "rimraf": "^2.5.4",
        "tslint": "^3.15.1",
        "typescript": "~2.0.10"
    },
    "repository": {}
}

---

让我们看一下清单

• 是否已将jquery（

  “jquery”：“^3.1.1”

  ）添加到package.json
• 您是否添加了

  var$=require（“jquery”）到.ts文件的顶部

• 您是否已将jquery脚本添加到.html文件中，如下所示：
  

---

如果以上所有操作都完成了，那么在typescript文件中使用jQuery应该没有问题。希望这有帮助

您缺少一些依赖项，请将

package.json

文件的内容粘贴到问题中。npm消息中没有错误，可能存在重复项。我认为您使用JQuery与Angular 2的方式是错误的。这个话题很好：嗨，谢谢你的回复。我现在已经完成了上面的所有操作，但在->var$table=$（'table.users'）上的jQuery中仍然会出现错误；好吧，这很奇怪。。你能把错误信息发出去吗？也许这是我们可以合作的。

{
    "name": "angular-quickstart",
    "version": "1.0.0",
    "description": "QuickStart package.json from the documentation, supplemented with testing support",
    "scripts": {
        "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
        "e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
        "lint": "tslint ./app/**/*.ts -t verbose",
        "lite": "lite-server",
        "pree2e": "webdriver-manager update",
        "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
        "test-once": "tsc && karma start karma.conf.js --single-run",
        "tsc": "tsc",
        "tsc:w": "tsc -w"
    },
    "keywords": [],
    "author": "",
    "license": "MIT",
    "dependencies": {
        "@angular/common": "~2.4.0",
        "@angular/compiler": "~2.4.0",
        "@angular/core": "~2.4.0",
        "@angular/forms": "~2.4.0",
        "@angular/http": "~2.4.0",
        "@angular/platform-browser": "~2.4.0",
        "@angular/platform-browser-dynamic": "~2.4.0",
        "@angular/router": "~3.4.0",
        "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.18",
        "@types/jquery": "^2.0.39",
        "angular-in-memory-web-api": "~0.2.4",
        "core-js": "^2.4.1",
        "ng2-table": "^1.3.2",
        "rxjs": "5.0.1",
        "systemjs": "0.19.40",
        "zone.js": "^0.7.4"
    },
    "devDependencies": {
        "@types/jasmine": "^2.5.36",
        "@types/jquery": "^2.0.39",
        "@types/node": "^6.0.61",
        "canonical-path": "0.0.2",
        "concurrently": "^3.1.0",
        "http-server": "^0.9.0",
        "jasmine-core": "~2.4.1",
        "karma": "^1.3.0",
        "karma-chrome-launcher": "^2.0.0",
        "karma-cli": "^1.0.1",
        "karma-jasmine": "^1.0.2",
        "karma-jasmine-html-reporter": "^0.2.2",
        "lite-server": "^2.2.2",
        "lodash": "^4.16.4",
        "protractor": "~4.0.14",
        "rimraf": "^2.5.4",
        "tslint": "^3.15.1",
        "typescript": "~2.0.10"
    },
    "repository": {}
}