错误：类型'JQuery <htmlelement>'上不存在属性'draggable'

Question

通过将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

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

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

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

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

Answer 1

导入jqueryui

后，您还必须导入jquery

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

draggable（）函数现在应该可用了。

Answer 2

我正在使用Angular-CLI并且即使我添加了两行＆＃39; import ...＆＃39;也会出现此错误。有一种解决方法，将下面添加到app.module.ts的顶部。

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

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