web-dev-qa-db-fra.com

Comment étendre les fonctions JQuery dans TypeScript

Je réécris du code JS sur TypeScript et rencontre des problèmes avec l'importation de modules. Par exemple, je veux écrire ma fonction toggleVisiblity. Voici le code:

/// <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();

Mais le problème est que pour une raison inconnue, toggleVisibility n'est pas ajouté à l'interface JQuery, donc j'obtiens une erreur Property 'toggleVisibility' does not exist on type 'JQuery'., bien qu'il voit d'autres méthodes (val, each et ainsi de suite).

Pourquoi ça ne marche pas?

enter image description here

jquerytypescriptinterfacees6-modules
15
Alex Zhukovskiy

Essayez de mettre le

interface JQuery {
    toggleVisibility(): JQuery;
}

A l'intérieur d'un fichier séparé sans instructions d'import/export. Cela fonctionne pour moi. Bien qu'il soit intéressant de savoir pourquoi.

[~ # ~] modifier [~ # ~] : Il y a une excellente explication de ce comportement dans cette réponse pour poster: Comment étendre l'interface TypeScript 'Window'

24
mode777

J'ai eu la solution, cela a fonctionné pour moi:

Utilisez l'interface JQueryStatic pour un accès jQuery statique comme $ .jGrowl (...) ou jQuery.jGrowl (...) ou dans votre cas, jQuery.toggleVisibility ():

interface JQueryStatic {

    ajaxSettings: any;

    jGrowl(object?, f?): JQuery;

}

Et pour vos propres fonctions personnalisées que vous utilisez à l'aide de jQuery.fn.extend, utilisez l'interface JQuery:

interface JQuery {

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

    enable(): JQuery;

    disable(): JQuery;

    check(): JQuery;

    select_custom(): JQuery;

}

En option, voici mes fonctions JQuery étendues:

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