JavaScript文件的Typescript错误消息

时间：2019-05-29 06:57:10

标签： javascript typescript

我只有下面的javascript代码的精简版。它按原样工作，但我需要将此代码集成到打字稿文件中。它在运行时仍然运行良好，但是在我的编辑器（Visual Studio代码）中出现错误。

enter image description here

下面是代码。

!function(e){"use strict";function i(i,a){var s=i.outerWidth(!0),o={};if(!i.is(":visible")&&!n){switch(n=!0,i.addClass("ps-active-panel").css({position:"fixed",top:0,height:"100%","z-index":9999999999}),i.data(a),e("html").addClass("overflow-hidden"),e("body").addClass("overflow-hidden"),e("#eskimo-overlay").bind("touchmove",!1),e("#eskimo-overlay").fadeIn(200),a.side){case"left":i.css({left:"-"+s+"px",right:"auto"}),o.left="+="+s;break;case"right":i.css({left:"auto",right:"-"+s+"px"}),o.right="+="+s}t.animate({},a.duration),i.show().animate(o,a.duration,function(){n=!1,"function"==typeof a.onOpen&&a.onOpen()})}}var t=e("body"),n=!1;e.panelslider=function(t,n){var a=e(".ps-active-panel");n=e.extend({},{side:"left",duration:200,clickClose:!0,onOpen:null},n),a.is(":visible")&&a[0]!=t[0]?e.panelslider.close(function(){i(t,n)}):a.length&&!a.is(":hidden")||i(t,n)},e.panelslider.close=function(i){var a=e(".ps-active-panel"),s=a.data("duration"),o=a.outerWidth(!0),l={};if(a.length&&!a.is(":hidden")&&!n){switch(n=!0,a.data("side")){case"left":l.left="-="+o;break;case"right":l.right="-="+o}a.animate(l,s),t.animate({},s,function(){a.fadeOut(200),a.removeClass("ps-active-panel"),e("html").removeClass("overflow-hidden"),e("body").removeClass("overflow-hidden"),e("#eskimo-overlay").fadeOut(200),n=!1,i&&i()})}},e(document).bind("click keyup",function(i){var t=e(".ps-active-panel");"keyup"==i.type&&27!=i.keyCode||t.is(":visible")&&t.data("clickClose")&&e.panelslider.close()}),e(document).on("click",".ps-active-panel",function(e){e.stopPropagation()}),e.fn.panelslider=function(i){return this.on("click",function(t){var n=e(".ps-active-panel"),a=e(this.getAttribute("href"));n.is(":visible")&&a[0]==n[0]?e.panelslider.close():e.panelslider(a,i),t.preventDefault(),t.stopPropagation()}),this}}(jQuery);
jQuery(document).ready(function(){jQuery("body").find(".eskimo-panel-open").panelslider({side:"right",clickClose:!0,duration:400}),jQuery("body").find(".eskimo-panel-close").on("click",function(){return jQuery.panelslider.close(),!1})});

可以使用此代码执行哪些操作以避免在编辑器中出现TypeScript错误？

编辑

此刻，我将缩小的javascript代码复制/粘贴到另一个TypeScript文件中（将其包装在panel函数中），该代码在运行时有效，但在编辑器中出现错误。

enter image description here

3 个答案:

答案 0 :(得分：0)

如果它是精简版的js，您可以忽略/排除该文件到tsconfig中。

tsconfig文档link

答案 1 :(得分：0)

如果您使用的是TSLint，则可以在以下注释之间包装该代码：

.number {
    font-family: 'Carter One', cursive;
    font-size: 1.5rem;
    color: #365;
    width: 56px;
    display: inline-flex;
}

对于ESLint，您应该使用：

panel(){

/* tslint:disable */
!function(e){"use strict";function i(i,a){var s=i.outerWidth(!0),o={};if(!i.is(":visible")&&!n){switch(n=!0,i.addClass("ps-active-panel").css({position:"fixed",top:0,height:"100%","z-index":9999999999}),i.data(a),e("html").addClass("overflow-hidden"),e("body").addClass("overflow-hidden"),e("#eskimo-overlay").bind("touchmove",!1),e("#eskimo-overlay").fadeIn(200),a.side){case"left":i.css({left:"-"+s+"px",right:"auto"}),o.left="+="+s;break;case"right":i.css({left:"auto",right:"-"+s+"px"}),o.right="+="+s}t.animate({},a.duration),i.show().animate(o,a.duration,function(){n=!1,"function"==typeof a.onOpen&&a.onOpen()})}}var t=e("body"),n=!1;e.panelslider=function(t,n){var a=e(".ps-active-panel");n=e.extend({},{side:"left",duration:200,clickClose:!0,onOpen:null},n),a.is(":visible")&&a[0]!=t[0]?e.panelslider.close(function(){i(t,n)}):a.length&&!a.is(":hidden")||i(t,n)},e.panelslider.close=function(i){var a=e(".ps-active-panel"),s=a.data("duration"),o=a.outerWidth(!0),l={};if(a.length&&!a.is(":hidden")&&!n){switch(n=!0,a.data("side")){case"left":l.left="-="+o;break;case"right":l.right="-="+o}a.animate(l,s),t.animate({},s,function(){a.fadeOut(200),a.removeClass("ps-active-panel"),e("html").removeClass("overflow-hidden"),e("body").removeClass("overflow-hidden"),e("#eskimo-overlay").fadeOut(200),n=!1,i&&i()})}},e(document).bind("click keyup",function(i){var t=e(".ps-active-panel");"keyup"==i.type&&27!=i.keyCode||t.is(":visible")&&t.data("clickClose")&&e.panelslider.close()}),e(document).on("click",".ps-active-panel",function(e){e.stopPropagation()}),e.fn.panelslider=function(i){return this.on("click",function(t){var n=e(".ps-active-panel"),a=e(this.getAttribute("href"));n.is(":visible")&&a[0]==n[0]?e.panelslider.close():e.panelslider(a,i),t.preventDefault(),t.stopPropagation()}),this}}(jQuery);
jQuery(document).ready(function(){jQuery("body").find(".eskimo-panel-open").panelslider({side:"right",clickClose:!0,duration:400}),jQuery("body").find(".eskimo-panel-close").on("click",function(){return jQuery.panelslider.close(),!1})});
/* tslint:enable */

}

文件的其余部分将不受影响，并且短绒棉将按预期工作。

答案 2 :(得分：0)

您可以使用 // @ ts-ignore 指令来避免输入，也可以创建我们的声明文件（d.ts）用于panellider插件。

首先，让我们将所有与插件相关的代码移到一个单独的文件中，将其命名为 panelslider.plugin.ts 。所以内容应该是这样的，在这里我导入了jQuery并添加了 @ ts-ignore 指令以消除所有错误。

import jQuery from "jquery";

// @ts-ignore

    !function(e){"use strict";function i(i,a){var s=i.outerWidth(!0),o={};if(!i.is(":visible")&&!n){switch(n=!0,i.addClass("ps-active-panel").css({position:"fixed",top:0,height:"100%","z-index":9999999999}),i.data(a),e("html").addClass("overflow-hidden"),e("body").addClass("overflow-hidden"),e("#eskimo-overlay").bind("touchmove",!1),e("#eskimo-overlay").fadeIn(200),a.side){case"left":i.css({left:"-"+s+"px",right:"auto"}),o.left="+="+s;break;case"right":i.css({left:"auto",right:"-"+s+"px"}),o.right="+="+s}t.animate({},a.duration),i.show().animate(o,a.duration,function(){n=!1,"function"==typeof a.onOpen&&a.onOpen()})}}var t=e("body"),n=!1;e.panelslider=function(t,n){var a=e(".ps-active-panel");n=e.extend({},{side:"left",duration:200,clickClose:!0,onOpen:null},n),a.is(":visible")&&a[0]!=t[0]?e.panelslider.close(function(){i(t,n)}):a.length&&!a.is(":hidden")||i(t,n)},e.panelslider.close=function(i){var a=e(".ps-active-panel"),s=a.data("duration"),o=a.outerWidth(!0),l={};if(a.length&&!a.is(":hidden")&&!n){switch(n=!0,a.data("side")){case"left":l.left="-="+o;break;case"right":l.right="-="+o}a.animate(l,s),t.animate({},s,function(){a.fadeOut(200),a.removeClass("ps-active-panel"),e("html").removeClass("overflow-hidden"),e("body").removeClass("overflow-hidden"),e("#eskimo-overlay").fadeOut(200),n=!1,i&&i()})}},e(document).bind("click keyup",function(i){var t=e(".ps-active-panel");"keyup"==i.type&&27!=i.keyCode||t.is(":visible")&&t.data("clickClose")&&e.panelslider.close()}),e(document).on("click",".ps-active-panel",function(e){e.stopPropagation()}),e.fn.panelslider=function(i){return this.on("click",function(t){var n=e(".ps-active-panel"),a=e(this.getAttribute("href"));n.is(":visible")&&a[0]==n[0]?e.panelslider.close():e.panelslider(a,i),t.preventDefault(),t.stopPropagation()}),this}}(jQuery);
    jQuery(document).ready(function(){jQuery("body").find(".eskimo-panel-open").panelslider({side:"right",clickClose:!0,duration:400}),jQuery("body").find(".eskimo-panel-close").on("click",function(){return jQuery.panelslider.close(),!1})});

代码

import jQuery from "jquery";

// @ts-ignore
import "./panelslider.plugin";

jQuery(document).ready(function() {
    jQuery("body")
        .find(".eskimo-panel-open")
        .panelslider({ side: "right", clickClose: !0, duration: 400 });

        jQuery("body")
            .find(".eskimo-panel-close")
            .on("click", function() {
                return jQuery.panelslider.close(), !1;
            });
});

panelslider 插件的

类型声明。只需将以下代码添加到类型声明文件中即可（global.d.ts确保ts遵循编译器）

export type PanelSlider = {
    side: "right";
    clickClose: boolean;
    duration: number;
};

interface JQuery {
    panelslider(options: PanelSlider): void;
}

interface JQueryStatic {
    panelslider: {
        close(): any;
    };
}
相关问题
最新问题