Jak zdefiniować obiekt jQuery w maszynopisie?

Question

Mam następujący kod:

var modal = { 
    content: '', 
    form: '', 
    $form: '', 
    $message: '', 
    $modal: '', 
    $submits: '', 
    href: '' 
} 

$.modal = function (options) { 
    var settings = $.extend({}, $.modal.defaults, options), 
     root = getModalDiv(), 
    function getModalDiv() { 
     var modal = $('#modal'); 
     return modal; 
    }; 
})(jQuery); 

modal.$modal = $.modal({ 
    title: link.title, 
    closeButton: true, 
    content: modal.content, 
    onClose: onModalClose, 
    minWidth: 315, 
    maxHeight: false, 
    width: false, 
    resizeOnLoad: true 
}); 
modal.$form = modal.$modal.find('.form'); 

Dostaję błąd wskazując .find i mówiąc:

Obiekt znalezisko nie istnieje na zmiennej typu „string”. Rozumiem, co mówi błąd, ale jak mogę zdefiniować $modal jako zmienną, z której mogę korzystać na .find?

Również teraz jestem w świecie maszynopisu, czy istnieje lepszy sposób zdefiniowania modalu niż tutaj, gdzie zdefiniowałem go jako var?

Answer 1

Przypisanie funkcji, które wykonuje twój kod do $.modal jest, jak mniemam, niekompletne - jednak skoro pytasz o definiowanie typów, postaram się odpowiedzieć mimo to.

Pierwszą rzeczą, jeśli jeszcze nie: pobierz jquery.d.ts from codeplex i podaj go w kodzie tak, jak to opisano poniżej. Dostarczy ci deklaracji typów dla jQuery, które są bardzo pomocne podczas pracy z biblioteką. Pozwoli to również na zdefiniowanie elementów, które mają być obiektami jQuery.

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

Jako przykład przyjrzeć IModal która stanowi interfejs z 4 członków jQuery (wziąłem jakieś domysły z jakich rodzajów chcesz używać na innych członków - nie może być to, co chcesz) :

interface IModal { 
    content : string; 
    form : HTMLFormElement; 
    $form : JQuery; 
    $message: JQuery; 
    $modal : JQuery; 
    $submits: JQuery; 
    href : string; 
} 

deklaracja interfejs sekund, JQueryStatic, po prostu deklaruje inny statyczny element, który będzie dostępny na obiekcie $ (patrz przypis), ponieważ $ realizuje JQueryStatic w pliku jquery.d.ts.

interface JQueryStatic { 
    modal : any; 
}; 

Mając to na miejscu można teraz utworzyć modalne obiekt z wyraźnej informacji o typie, który jest zaopatrzony przez interfejs IModal że implementuje:

var modal : IModal = { 
    content : '', 
    form : null, 
    $form : null, 
    $message: null, 
    $modal : null, 
    $submits: null, 
    href : '' 
} 

i można przypisać funkcję do $ .modal ze względu na JQueryStatic dodać na:

$.modal = function (options) { 
    var settings = $.extend({}, $.modal.defaults, options), 
     root = getModalDiv(), 
     getModalDiv = function() { 
      var modal = $('#modal'); 
      return modal; 
     }; 

    ... 
})(jQuery); 

Mając to na miejscu, a jeśli to zadanie poprawić się następujący wiersz powinien teraz OK:

modal.$form = modal.$modal.find('.form'); 

Uwaga: moje doświadczenia z dodawaniem członków do istniejących interfejsów była niepewna w najlepszym razie - często kompilator nie je odebrać z jakiegokolwiek powodu. Uważam, że jest to bardziej prawdopodobne, ponieważ baza kodu rośnie, więc trudno jest ustalić dokładną przyczynę. Po prostu coś, na co warto zwrócić uwagę.