javascript - 如何将 jquery 类型导入到 typescript

Question

我意识到对此有多个问题，但我在寻找与我的匹配的问题时遇到问题，也许有人可以为我指出正确的方向。

在我的 Visual Studio 项目中，我使用 package.json 将 jquery 类型下载到 node_modules 文件夹中:

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

实际项目已经使用 jquery 2.1.4，但我认为如果我得到 3.2.0，应该不会有太大问题，因为没有 2.1.4 可用，类型版本是与jquery脚本版本有关？

我的 tsconfig.json 具有以下内容:

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

我的页面 QBMapByState.aspx 具有以下 javascript 文件 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');

我不确定是否需要在此处添加有关 jquery 类型的任何内容。

在我页面的 typescript 文件 QBMapByState.ts 中，我进行了一些导入，包括 jquery 键入，如下所示:

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

除了 jquery 之外的所有内容都在进行转译。我收到以下错误:

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

我怎样才能让它发挥作用？我哪里出错了？

调试错误:

Answer 1

正如错误所述，您不应该从 jquery 类型导入 $，而是从 jquery 本身导入它:

import $ from "jquery";

至于你的另一个问题，有一些breaking changes jquery 3 和 jquery 2 之间，所以我想您想为 jquery 2 安装使用类型定义:

npm install @types/jquery@2