Using jQuery in TypeScript (in an angular 2 project)

Question

Hi I have written some jQuery in one of my .ts angular components, but I can't seem to get it to work. I want to make a table scrollable. Here is the 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();`

I'm all new to this so I really don't know how to make it work. I've written

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

in the index.html file as well. I also tried installing:

npm install --save-dev @types/node

but i get the message:

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

Answer 1

Lets go over the checklist

• Have you added jquery ( "jquery": "^3.1.1" ) to package.json?
• Have you added var $ = require("jquery"); to the top of your .ts file?
• Have you added the jquery script to your .html file like so:
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

If all of the above has been done you should have no problem using jQuery in your typescript file. Hope this helps!