Come posso definire un oggetto jQuery in dattiloscritto?

Question

Ho il codice seguente:

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'); 

sto ottenendo un errore che indica .find e dicendo:

Il ritrovamento proprietà non esiste sulla variabile di tipo 'stringa'. Capisco cosa sta dicendo l'errore ma come posso definire $modal come variabile che posso usare .find?

Inoltre ora sono nel mondo dattiloscritto c'è un modo migliore per definire un modale rispetto a qui dove lo definisco come var?

Answer 1

La funzione assegnata dal codice a $.modal è, presumo, incompleta. Tuttavia, poiché si sta specificando la definizione dei tipi, proverò a rispondere comunque.

Quindi, per prima cosa, se non lo si è già fatto: scaricare jquery.d.ts from codeplex e fare riferimento al codice come indicato di seguito. Vi fornirà le dichiarazioni di tipo per jQuery, che sono molto utili quando si lavora con la libreria. Permetterà inoltre di definire i membri che dovrebbero essere oggetti jQuery.

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

Per fare un esempio, dare un'occhiata a IModal che è un'interfaccia con 4 membri jQuery (ho preso alcune ipotesi con quali tipi si voleva utilizzare sugli altri membri - potrebbero non essere ciò che si desidera) :

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

la seconda dichiarazione di interfaccia, JQueryStatic, semplicemente dichiara un altro membro static, che sarà accessibile sull'oggetto $ (vedi nota in calce), perché $ implementa JQueryStatic nel file jquery.d.ts.

interface JQueryStatic { 
    modal : any; 
}; 

Con questo posto è ora possibile creare l'oggetto modale con informazioni sul tipo esplicito che è fornito dall'interfaccia IModal che implementa:

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

E è possibile assegnare la funzione a $ .modal a causa della JQueryStatic add on:

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

    ... 
})(jQuery); 

Con questo in luogo, e se si corregge che l'assegnazione, la seguente riga dovrebbe ora OK:

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

Nota: le mie esperienze con l'aggiunta di membri di interfacce esistenti è stato incerto nella migliore delle ipotesi - spesso il compilatore non prenderli per qualsiasi ragione. Trovo che questo sia più probabile man mano che la tua base di codice cresce, quindi è difficile isolare la causa esatta. Solo qualcosa da tenere d'occhio.