【问题标题】：Error: Property 'draggable' does not exist on type 'JQuery<HTMLElement>'错误：“JQuery<HTMLElement>”类型上不存在属性“可拖动”
【发布时间】：2018-04-24 02:06:32
【问题描述】：

通过将 Angular 2 和 Typescript 与 JQuery 和 JQueryUI 一起使用，我收到以下错误：

Property 'draggable' does not exist on type 'JQuery<HTMLElement>'

我了解.draggable() 是一个依赖于 JQueryUI 的函数，并且我已经使用以下命令在我的 node_modules 中安装了 JQuery 和 JQueryUI：

npm install --save jquery
npm install --save @types/jquery
npm install --save @types/jqueryui

我的 Webstorm IDE 可以通过按 Ctrl+单击功能突出显示并引导我到正确的位置，但控制台显示我上面提到的错误。

我正在使用import * as $ from 'jquery'; 导入模块，我的代码是$('#element').draggable({containment: '#containment-wrapper});

谁能帮我找出错误在哪里？

更新

感谢@LLai，它为我提供了解决问题的好方向。基本上，我必须在我的项目中安装 jqueryui 核心：

npm install --save-dev jqueryui

然后我必须像这样在jquery 之后导入jqueryui：

import * as $ from 'jquery';
import 'jqueryui'

嗯，这给了我很多错误，但看起来这是 @types/jquery 的某个版本的问题，所以我不得不在 Github 上关注这个 issue，它建议安装特定版本的 @types/jquery npm install @types/jquery@2.0.47 --save-dev。

完成这些步骤后，一切正常！希望它会帮助别人。

【问题讨论】：

您可以使用Renderer2 并在不使用jQuery 的情况下获取DOM 元素
我的问题不是如何获取 DOM 元素，而是如何让 .draggable() 函数（来自 JQueryUI）工作。
除此之外，我不知道使用 Renderer2 获取 DOM 元素的任何方法。您可以通过使用 ElementRef 而不是 Renderer2 来实现此目的。 Renderer2 可用于修改或创建新的 DOM 元素。如果我错了，请告诉我。
是的。那为什么要jQuery？
如果您阅读我上面的问题，您会发现我并不是在寻找有关如何获取 DOM 元素的解决方案。我的问题是作为 jQueryUI 一部分的可拖动函数。这就是我使用 jQuery 的原因。 draggable 不是我的特定函数或我的 dom 元素的属性，它是一个 jQuery 函数，可以将可拖动功能添加到任何元素

标签： jquery angular typescript jquery-ui types

【解决方案1】：

我正在使用 Angular-CLI 并收到此错误，即使我添加了两行“import ...”。有一种解决方法，将下面添加到 app.module.ts 的顶部。

/// <reference path="../../node_modules/@types/jquery/index.d.ts" />
/// <reference path="../../node_modules/@types/jqueryui/index.d.ts" />

我认为这可能是 Angular CLI 中 webpack 进程的一些缺陷。

【讨论】：

【解决方案2】：

您还必须在导入 jquery 后导入 jqueryui

import * as $ from 'jquery';
import 'jqueryui';

draggable() 函数现在应该可用了。

【讨论】：

你是对的！我还必须添加这个导入语句！但这不是我所做的唯一事情。我还用npm install --save-dev jqueryui 安装了jqueryui 核心，然后我必须根据Github 上的对话安装特定版本的@types/jquery。反正你是对的！非常感谢您花时间尝试解决此问题。