Typescript TypeError：可拖动不是函数

Question

我正在使用带有 vue 和 jquery ui 的打字稿。

我收到错误，因为“TypeError: item.$element.draggable is not a function”。

我在这段代码中遗漏了什么。从以下文件中可以看出，我也包含了 jquery-ui。我想在我的代码中使用 jquery ui 插件。

我搜索了很多地方，但没有一个解决方案适合我。我还为 jquery 和 jquery ui 添加了类型。

我的 floatingmenu.ts 文件

import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import $ from 'jquery';
import anime from 'animejs';
import 'jquery-ui';

@Component
export default class FloatingMenuComponent extends Vue {

    mounted() {

        var menu = new Menu("#myMenu");
        var item1 = new Item("list","#FF5C5C");
        var item2 = new Item("torso", "#FF5C5C");
        var item3 = new Item("social-facebook", "#5CD1FF");
        var item4 = new Item("paypal", "#FFF15C");
        var item5 = new Item("link", "#64F592");

        menu.add(item1);
        menu.add(item2);
        menu.add(item3);
        menu.add(item4);
        menu.add(item5);
        $(document).delay(50).queue(function(next) {
            menu.open();
            next();
            $(document).delay(1000).queue(function(next) {
                menu.close();
                next();
            });
        });



    }
}

var timeOut: number;

class Menu {
    $element: any;
    size: number;
    first:any = null;
    last:any = null;
    timeOut: null;
    hasMoved: boolean;
    status: string;
    constructor(menu: string) {
        this.$element = $(menu);
        this.size = 0;
        this.first = null;
        this.last = null;
        this.timeOut = null;
        this.hasMoved = false;
        this.status = "closed";
    }

    add(item: Item) {
        var menu = this;
        if (this.first == null) {
            this.first = item;
            this.last = item;
            this.first.$element.on("mouseup", function() {
                if (menu.first.isMoving) {
                    menu.first.isMoving = false;        
                } else {
                    menu.click();
                }
            }); 
            item.$element.draggable(
                {
                    start: function() {
                        menu.close();
                        item.isMoving = true;
                    }  
                },
                {
                    drag: function() {
                        if (item.next) {
                            item.next.updatePosition();
                        }
                    }
                },
                {
                    stop: function() {
                        item.isMoving = false;
                        item.next.moveTo(item);
                    }
                }
            );
        } else {
            this.last.next = item;
            item.prev = this.last;
            this.last = item;
        }
        this.$element.after(item.$element);


    }

    open() {
        this.status = "open";
        var current = this.first.next;
        var iterator = 1;
        var head = this.first;
        var sens = head.$element.css("left") < head.$element.css("right") ? 1 : -1;
        while (current != null) {
            anime({
                targets: current.$element[0],
                left: parseInt(head.$element.css("left"), 10) + (sens * (iterator * 50)),
                top: head.$element.css("top"),
                duration: 500
            });
            iterator++;
            current = current.next;
        }    
    }

    close() {
        this.status = "closed";
        var current = this.first.next;
        var head = this.first;
        var iterator = 1;
        while (current != null) {
            anime({
                targets: current.$element[0],
                left: head.$element.css("left"),
                top: head.$element.css("top"),
                duration: 500
            });
            iterator++;
            current = current.next;
        }
    }

    click() {
        if (this.status == "closed") {
            this.open();
        } else {
            this.close();
        }
    }

}

class Item {
    $element: any;
    icon: any;
    prev: any = null;
    next:any = null;
    isMoving: boolean;
    constructor(icon: string, backgroundColor: string) {
        this.$element = $(document.createElement("div"));
        this.icon = icon;
        this.$element.addClass("item");
        this.$element.css("background-color", backgroundColor);
        var i = document.createElement("i");
        $(i).addClass("fi-" + icon);
        this.$element.append(i);
        this.prev = null;
        this.next = null;
        this.isMoving = false;
        var element = this;
        this.$element.on("mousemove", function() {
            clearTimeout(timeOut);
            timeOut = setTimeout(function() {
                if (element.next && element.isMoving) {
                    element.next.moveTo(element);
                } 
            }, 10);
        });
    }

    moveTo(item: { $element: { css: { (arg0: string): void; (arg0: string): void; }; }; }) {
        anime({
            targets: this.$element[0],
            left: item.$element.css("left"),
            top: item.$element.css("top"),
            duration: 700,
            elasticity: 500
        });
        if (this.next) {
            this.next.moveTo(item);
        }
    }

    updatePosition() {    
        anime({
            targets: this.$element[0],
            left: this.prev.$element.css("left"),
            top: this.prev.$element.css("top"),
            duration: 200
        });

        if (this.next) {
            this.next.updatePosition();
        }
    }
}

我的 floatingmenu.ts.html

<template>
    <div class="center menu">
        <div id="myMenu"></div>
    </div>
</template>

<script src="./floatingmenu.ts"></script>

Answer 1

当我引用 jquery-ui 的 dist 时，它需要为库提供别名。

https://stackoverflow.com/a/40441253/9263418