时间戳

首页 > 解决方案 > 如何将 jquery 类型导入打字稿

javascript - 如何将 jquery 类型导入打字稿

问题描述

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

在我的 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 类型的任何内容。

在我页面的打字稿文件 QBMapByState.ts 中，我做了一些导入，包括 jquery 输入，如下所示：

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

除了 jquery 之外的所有东西都在编译。我收到以下错误：

无法导入类型声明文件。考虑导入“jquery”而不是“@types/jquery”

我怎样才能让它工作？我哪里错了？

调试错误： 在此处输入图像描述

标签： javascriptjquerytypescripttypescript-typings

解决方案

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

import $ from "jquery";

至于您的另一个问题，jquery 3 和 jquery 2 之间存在一些重大变化，所以我想您想为 jquery 2 安装使用类型定义：

npm install @types/jquery@2

推荐阅读