web-dev-qa-db-ja.com

TypeScriptでJQuery関数を拡張する方法

TypeScriptで一部のJSコードを書き換えているところ、モジュールのインポートで問題が発生しています。たとえば、toggleVisiblity関数を記述します。ここにコードがあります：

/// <reference path="../../typings/jquery/jquery.d.ts" />

import * as $ from "jquery";

interface JQuery {
    toggleVisibility(): JQuery;
}

$.fn.extend({
    toggleVisibility: function () {
        return this.each(function () {
            const $this = $(this);
            const visibility = $this.css('visibility') === 'hidden' ? 'visible' : 'hidden';
            $this.css('visibility', visibility);
        });
    }
});

const jQuery = $('foo');
const value = jQuery.val();
jQuery.toggleVisibility();

しかし問題は、未知の理由でtoggleVisibilityがJQueryインターフェースに追加されていないため、他のメソッド（val、eachなど）を確認しても、Property 'toggleVisibility' does not exist on type 'JQuery'.エラーが発生することです。

なぜ機能しないのですか？

enter image description here

jquerytypescriptinterfacees6-modules
15
Alex Zhukovskiy

入れてみてください

interface JQuery {
    toggleVisibility(): JQuery;
}

インポート/エクスポートステートメントのない別のファイル内。これは私にとってはうまくいきます。理由を知ることは興味深いことですが。

[〜＃〜] edit [〜＃〜]：この投稿の回答には、この動作に関する優れた説明があります： 方法「ウィンドウ」TypeScriptインターフェースを拡張する

24
mode777

私は解決策を得ました、これは私のために働きました：

$ .jGrowl（...）やjQuery.jGrowl（...）のような静的なjQueryアクセスにはJQueryStaticインターフェースを使用します。あるいは、jQuery.toggleVisibility（）：

interface JQueryStatic {

    ajaxSettings: any;

    jGrowl(object?, f?): JQuery;

}

そして、jQuery.fn.extendを使用して使用する独自のカスタムメイド関数については、JQueryインターフェースを使用します。

interface JQuery {

    fileinput(object?): void;//custom jquery plugin, had no typings

    enable(): JQuery;

    disable(): JQuery;

    check(): JQuery;

    select_custom(): JQuery;

}

オプション、ここに私の拡張されたJQuery関数を示します。

jQuery.fn.extend({
    disable: function () {
        return this.each(function () {
            this.disabled = true;
        });
    },
    enable: function () {
        return this.each(function () {
            this.disabled = false;
        });
    },
    check: function (checked) {
        if (checked) {
            $(this).parent().addClass('checked');
        } else {
            $(this).parent().removeClass('checked');
        }
        return this.prop('checked', checked);
    },
    select_custom: function (value) {
        $(this).find('.dropdown-menu li').each(function () {
            if ($(this).attr('value') == value) {
                $(this).click();
                return;
            }
        });
    }
});
4
Displee