我如何使用@types/jqueryui 和 angular2（打字稿）

Question

我想在我的角度應用程序中使用 jqueryui

我可以像這樣導入 jquery

import * as $ from 'jquery';

但是我如何從https://www.npmjs.com/package/@types/jqueryui導入 '@types/jqueryui'

由於 jqueryui 是一個接口，我無法導入它

我如何使用 jquery

 export class JqueryUIIntegrationComponent implements AfterViewInit{
        @ViewChild('jqueryElement') el:ElementRef;
        constructor() {
        }

    ngAfterViewInit() {
        console.log(this);
        $(this.el.nativeElement).slideUp(4000).slideDown(5000); // jquery function
        $(this.el.nativeElement).draggable(); //Since jqueryui is not imported this will not work
    }
}

Answer 1

解決方法：（不通過@類型的解決方案/ jQueryUI的）

您可以使用@types/jqueryui進行打字/自動完成支持。

根 HTML：

導入 jquery 和 jquery UI js 文件

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

成分：

在您的組件中聲明

declare var $:any;

像這樣在課堂上使用它

export class JqueryUIIntegrationComponent implements AfterViewInit {
    @ViewChild('jqueryElement') el:ElementRef;
    constructor() {
    }

    ngAfterViewInit() {
        console.log(this);
        $(this.el.nativeElement).draggable(); //same old style
    }
}

注意：歡迎通過@types/jqueryui （正確方式）提供任何本機支持。 如果您找到任何解決方案，請告訴我。

Answer 2

在 *.ts 文件引用之上添加對d.ts類型文件的引用

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

它對我有用。