如何将jQuery类型输入到打字稿

Question

I realize that there are multiple question about this, but I'm having issues finding one that matches mine, maybe someone can point me in the right direction.

In my Visual Studio project I have used package.json to download jquery typings into the node_modules folder:

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "@syncfusion/ej2": "17.1.51",
    "@syncfusion/ej2-base": "17.1.49",
    "@syncfusion/ej2-data": "17.1.51",
    "@syncfusion/ej2-inputs": "17.1.50",
    "@syncfusion/ej2-buttons": "17.1.50",
    "@syncfusion/ej2-splitbuttons": "17.1.51",
    "@syncfusion/ej2-lists": "17.1.47",
    "@syncfusion/ej2-navigations": "17.1.49",
    "@syncfusion/ej2-popups": "17.1.50",
    "@syncfusion/ej2-charts": "17.1.51",
    "@syncfusion/ej2-calendars": "17.1.51",
    "@syncfusion/ej2-grids": "17.1.51",
    "@syncfusion/ej2-maps": "17.1.51",
    "@syncfusion/ej2-pdf-export": "17.1.48",
    "@syncfusion/ej2-svg-base": "17.1.48",
    "@syncfusion/ej2-file-utils": "17.1.47",
    "@syncfusion/ej2-compression": "17.1.47",
    "@types/jquery": "3.2.0"
  }
}

The actual project already uses jquery 2.1.4, but I'm thinking it shouldn't be too much of an issue if I got 3.2.0 as there wasn't a 2.1.4 available, is the types version was related to jquery script version?

My tsconfig.json has the following:

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es2015",
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "baseUrl": "./",
    "paths": {
      "@syncfusion/ej2-base": [ "./node_modules/@syncfusion/ej2-base/dist/ej2-base.umd.min.js" ],
      "@syncfusion/ej2-buttons": [ "./node_modules/@syncfusion/ej2-buttons/dist/ej2-buttons.umd.min.js" ],
      "@syncfusion/ej2-popups": [ "./node_modules/@syncfusion/ej2-popups/dist/ej2-popups.umd.min.js" ],
      "@syncfusion/ej2-maps": [ "./node_modules/@syncfusion/ej2-maps/dist/ej2-maps.umd.min.js" ],
      "@types/jquery": [ "./node_modules/@types/jquery/index.d.ts" ]
    }
  },
  "exclude": [
    "wwwroot"
  ]
}

My page QBMapByState.aspx has the following javascript file QBMapByState.config.js:

System.config({
paths: {
'npm:': './node_modules/',
'syncfusion:': '../node_modules/@syncfusion/',
'types:': '../node_modules/@types/'

},
map: {
app: '../scripts/QBMapping',

//Syncfusion packages mapping
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
"@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
"@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
"@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
"@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
"@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
"@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
"@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
"@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
"@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
"@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
"@syncfusion/ej2-maps": "syncfusion:ej2-maps/dist/ej2-maps.umd.min.js",
"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
"@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
"@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
"@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js"
},
packages: {
'app': { main: 'QBMapByState.js', defaultExtension: 'js' }
}
});

System.import('app');

I'm not sure if I need to add anything in here in regards to the type jquery.

And in my page's typescript file QBMapByState.ts I do some imports including the jquery typing like so:

import { Maps } from "@syncfusion/ej2-maps";
import { RadioButton, CheckBox, Button, ChangeEventArgs } from '@syncfusion/ej2-buttons';
import * as $ from '@types/jquery';

All but the jquery is transpiling. I get the following error:

Cannot import type declaration files. Consider importing 'jquery' instead of '@types/jquery'

How can I get this to work? Where am I going wrong?

Debug Errors:

Answer 1

As the error states, you shouldn't import $ from the jquery typings, you import it from jquery itself:

import $ from "jquery";

As for your other question, there are some breaking changes between jquery 3 and jquery 2, so I'd imagine you want to use the type definitions for your jquery 2 installation:

npm install @types/jquery@2

Answer 2

You should add typeRoots to the tsconfig.json .

You can check it here how to use it.

https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#types-typeroots-and-types