Quando si utilizza dattiloscritto devo importare un plugin.d.ts ogni js esterni che utilizzo? In altre parole, ho bisogno di creare un jQuery.d.ts con tutte le interfacce?
Utilizzando jQuery plugin nella dattiloscritto
voti
66
È pubblicato 04/10/2012 alle 03:29 2012-10-04 03:29
fonte dall'utente MuriloKunze
In altre lingue...
fonte dall'utente MuriloKunze
In altre lingue...
5 risposte
voti 98
98
Il problema con i plugin jQuery (e altre librerie basate plugin) è che non solo è necessario un file library.d.ts per la libreria di base, ma è necessario anche un file plugin.d.ts per ogni plugin. E in qualche modo Thes plugin.d.ts file devono estendere le interfacce di libreria definite nei file library.d.ts. Fortunatamente, Carattere tipografico ha un po 'di bella funzionalità che ti permette di fare proprio questo.
Con classesNon ci può essere solo una definizione unica cononical di una classe all'interno di un progetto. Quindi, se si definisce un class Fooi membri che si mette sulla Foosono tutti si ottiene. Eventuali ulteriori definizioni di Foosi tradurrà in un errore. Con interfaces, però, i membri sono additivi, quindi se si definisce interface Barcon un set di membri che si può definire 'interfaccia Bar' una seconda volta per aggiungere ulteriori membri al interface. Questa è la chiave per sostenere i plugin jQuery in modo fortemente tipizzato.
Quindi, per aggiungere il supporto per un determinato plug-in jQuery si sta andando ad avere bisogno di creare un file plugin.d.ts per il plugin che si desidera utilizzare. Usiamo Templates jQuery nel nostro progetto quindi ecco il file jquery.tmpl.d.ts abbiamo creato per aggiungere il supporto per questo 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;
}
Rompere questo in giù la prima cosa che abbiamo fatto è quello di definire i metodi che vengono aggiunti alla JQueryinterfaccia. Questi consentono di ottenere intellisense e controllo di tipo quando si digita $('#foo').tmpl();successivo abbiamo aggiunto i metodi per l' JQueryStaticinterfaccia che compare quando si digita $.tmpl();E infine il jQuery Templates plug definisce alcune delle proprie strutture di dati e quindi abbiamo bisogno di definire le interfacce per queste strutture.
Ora che abbiamo le interfacce aggiuntive definied abbiamo solo bisogno di loro riferimento dal file .ts consumano. Per fare questo basta aggiungere i riferimenti di seguito per la parte superiore del nostro file .ts e basta. Per quel file, dattiloscritto vedrà entrambi i metodi di jQuery base ei metodi di plugin. Se si utilizzano più i plugin solo assicurarsi di riferimento e tutti i singoli file plugin.d.ts e si dovrebbe essere buono.
/// <reference path="jquery.d.ts"/>
/// <reference path="jquery.tmpl.d.ts" />
voti 4
4
Salvataggio di un file .ts non innesca automaticamente la compilazione in Visual Studio. Avrete bisogno di costruire / ricostruire per attivare la compilazione.
Dichiarare file (file.d.ts) permette al compilatore dattiloscritto ottenere una migliore informazione di tipo circa le librerie JavaScript che si sta utilizzando da quel file. Si possono avere le interfacce definite il tutto in un unico file, o in più file; questo non dovrebbe fare alcuna differenza. È possibile anche "dichiarare" i tipi / variabili che si sta utilizzando da librerie esterne utilizzando qualcosa di simile:
declare var x: number;
che dirà al compilatore di trattare x come un numero.
voti 3
3
Ho cercato per un d.tS per jquery.inputmask e, infine, creato un semplice uno dei miei. È a
https://github.com/jpirok/Typescript-jquery.inputmask
oppure si può vedere il codice qui sotto.
Essa non coprirà tutti i casi per jquery.inputmask, ma sarà probabilmente gestire la maggior parte.
///<reference path="../jquery/jquery.d.ts" />
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;
}
voti 2
2
Prima di creare il proprio .d.tsfile per il plug-in, si dovrebbe controllare per vedere se è già come un DefinitelyTyped biblioteca. Ad esempio, utilizzando Tipizzazioni , è possibile eseguire il comando:
typings install dt~bootstrap --global --save
... e senza alcun codice aggiuntivo avrete accesso ai vari plugin Bootstrap.
Se non hanno il plugin che stai cercando, prendere in considerazione contribuendo vostra propria definizione.
voti 0
0
Utilizzo di un .d.tsfile di dichiarazione è probabilmente meglio, ma in alternativa è possibile utilizzare anche del dattiloscritto aumento globale e la fusione dichiarazione di aggiungere metodi per l'interfaccia di JQuery. È possibile inserire qualcosa di simile a quanto segue in qualsiasi file dattiloscritto:
declare global {
interface JQuery {
nameOfPluginMethod(arg: any): JQuery;
}
}