By using Angular 2 and Typescript together with JQuery and JQueryUI I'm getting the following error:

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

I understand that .draggable() is a function that depends on JQueryUI and I've already installed JQuery and JQueryUI in my node_modules using the following commands:

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

My Webstorm IDE can highlight and lead me to the right location by pressing Ctrl+Click on the function but the console shows the error that I've mentioned above.

I'm importing the module with import * as $ from 'jquery'; and my code is $('#element').draggable({containment: '#containment-wrapper});

Can anyone help me to find where is the error?

UPDATE

Thanks to @LLai that gave me a good direction on how to solve the issue. Basically, I have to install the jqueryui core in my project:

npm install --save-dev jqueryui

Then I have to import jqueryui after jquery like this:

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

Well, that gave me a lot of error, but it looks like it's a problem with some version of @types/jquery, so I had to follow this issue on Github that recommends installing a specific version of @types/jquery with npm install @types/jquery@2.0.47 --save-dev.

After those steps, everything is working fine! Hope it'll help someone else.