Utilizzando il plugin jQuery in TypeScript

Quando uso typescript devo importare un plugin.d.ts per ogni js esterno che uso? In altre parole, devo creare un jQuery.d.ts con tutte le interfacce?

Il problema con i plugin jQuery (e altre librerie basate su plugin) è che non solo è necessario un file library.d.ts per la libreria di base, ma è necessario anche un file plugin.d.ts per ciascun plug-in. E in qualche modo i file plugin.d.ts devono estendere le interfacce della libreria definite nei file library.d.ts. Fortunatamente, TypeScript ha una piccola funzionalità che ti permette di fare proprio questo.

Con le classs momento non può esistere che una singola definizione conica di una class all’interno di un progetto. Quindi, se definisci una class Foo i membri che hai messo su Foo sono tutto ciò che ottieni. Qualsiasi altra definizione di Foo causerà un errore. Con le interfaces , tuttavia, i membri sono additivi, quindi se si definisce la interface Bar con un set di membri, è ansible definire “barra di interfaccia” una seconda volta per aggiungere ulteriori membri interface . Questa è la chiave per supportare i plugin jQuery in modo fortemente tipizzato.

Quindi per aggiungere il supporto per un determinato plugin jQuery avrai bisogno di creare un file plugin.d.ts per il plugin che vuoi usare. Utilizziamo i template jQuery nel nostro progetto, ecco il file jquery.tmpl.d.ts che abbiamo creato per aggiungere il supporto per quel plugin:

 interface JQuery { tmpl(data?:any,options?:any): JQuery; tmplItem(): JQueryTmplItem; template(name?:string): ()=>any; } interface JQueryStatic { tmpl(template:string,data?:any,options?:any): JQuery; tmpl(template:(data:any)=>string,data?:any,options?:any): JQuery; tmplItem(element:JQuery): JQueryTmplItem; tmplItem(element:HTMLElement): JQueryTmplItem; template(name:string,template:any): (data:any)=>string[]; template(template:any): JQueryTemplateDelegate; } interface JQueryTemplateDelegate { (jQuery: JQueryStatic, data: any):string[]; } interface JQueryTmplItem { data:any; nodes:HTMLElement[]; key:number; parent:JQueryTmplItem; } 

Rompendo questo la prima cosa che abbiamo fatto è definire i metodi che vengono aggiunti all’interfaccia JQuery . Questi ti permettono di ottenere intelligenza e controllo di tipo quando digiti $('#foo').tmpl(); Successivamente abbiamo aggiunto dei metodi all’interfaccia JQueryStatic che JQueryStatic quando digiti $.tmpl(); Infine, il plugin jQuery Templates definisce alcune delle proprie strutture dati, quindi è stato necessario definire le interfacce per tali strutture.

Ora che abbiamo le interfacce aggiuntive definite dobbiamo solo fare riferimento ai file .ts. Per fare ciò aggiungiamo semplicemente i riferimenti qui sotto nella parte superiore del nostro file .ts e basta. Per quel file, TypeScript vedrà sia i metodi jQuery di base che i metodi plugin. Se usi più plugin, assicurati di riferirti a tutti i tuoi singoli file plugin.d.ts e dovresti essere bravo.

 ///  ///  

Il salvataggio di un file .ts non triggers automaticamente la compilazione in Visual Studio. Sarà necessario creare / ribuild per triggersre la compilazione.

Dichiarare i file (file.d.ts) consente al compilatore TypeScript di ottenere informazioni sul tipo migliori sulle librerie JavaScript che si stanno utilizzando da quel file. È ansible definire le interfacce in un unico file o in più file; questo non dovrebbe fare alcuna differenza. Puoi anche “dichiarare” i tipi / variabili che stai usando da librerie esterne usando qualcosa come:

 declare var x: number; 

che dirà al compilatore di trattare x come un numero.

Ho cercato un d.ts per jquery.inputmask e finalmente ne ho creato uno semplice. È a

https://github.com/jpirok/Typescript-jquery.inputmask

oppure puoi vedere il codice qui sotto.

Non coprirà tutti i casi per jquery.inputmask, ma probabilmente ne gestirà la maggior parte.

  /// interface JQueryInputMaskOptions { mask?: string; alias?: string; placeholder?: string; repeat?: number; greedy?: boolean; skipOptionalPartCharacter?: string; clearIncomplete?: boolean; clearMaskOnLostFocus?: boolean; autoUnmask?: boolean; showMaskOnFocus?: boolean; showMaskOnHover?: boolean; showToolTip?: boolean; isComplete?: (buffer, options) => {}; numeric?: boolean; radixPoint?: string; rightAlignNumerics?: boolean; oncomplete?: (value?: any) => void; onincomplete?: () => void; oncleared?: () => void; onUnMask?: (maskedValue, unmaskedValue) => void; onBeforeMask?: (initialValue) => void; onKeyValidation?: (result) => void; onBeforePaste?: (pastedValue) => void; } interface inputMaskStatic { defaults: inputMaskDefaults; isValid: (value: string, options: inputMaskStaticDefaults) => boolean; format: (value: string, options: inputMaskStaticDefaults) => boolean; } interface inputMaskStaticDefaults { alias: string; } interface inputMaskDefaults { aliases; definitions; } interface JQueryStatic { inputmask: inputMaskStatic; } interface JQuery { inputmask(action: string): any; inputmask(mask: string, options?: JQueryInputMaskOptions): JQuery; } 

Prima di creare il tuo file .d.ts per il plugin, dovresti controllare se è già una libreria DefinitelyTyped . Ad esempio, utilizzando Digitazioni , è ansible eseguire il comando:

 typings install dt~bootstrap --global --save 

… e senza alcun codice aggiuntivo avrai accesso ai vari plugin di Bootstrap.

Se non hanno il plug-in che stai cercando, considera di contribuire con la tua definizione.

L’utilizzo di un file di dichiarazione .d.ts è probabilmente migliore, ma in alternativa è ansible utilizzare anche l’integrazione globale di TypeScript e la dichiarazione di unione per aggiungere metodi all’interfaccia di JQuery. Puoi inserire qualcosa come il seguente in uno qualsiasi dei tuoi file TypeScript:

 declare global { interface JQuery { nameOfPluginMethod(arg: any): JQuery; } }