Când utilizați dactilografiat am nevoie pentru a importa un plugin.d.ts pentru fiecare js externe pe care le folosesc? Cu alte cuvinte, am nevoie pentru a crea un jQuery.d.ts cu toate interfețele?
Utilizarea jQuery plugin dactilografiat
voturi
66
Întrebat 04/10/2012 la 03:29 2012-10-04 03:29
sursa de către utilizator MuriloKunze
În alte limbi...
sursa de către utilizator MuriloKunze
În alte limbi...
5 răspunsuri
voturi 98
98
Problema cu plugin-uri jQuery (și alte biblioteci bazate pe plugin) este că nu numai că aveți nevoie de un fișier library.d.ts pentru biblioteca de bază, dar ai nevoie, de asemenea, un fișier plugin.d.ts pentru fiecare plugin. Și într-un fel Tes plugin.d.ts fișiere trebuie să se extindă interfețele de bibliotecă definite în fișierele library.d.ts. Din fericire, typescript are o caracteristică puturos pic care vă permite să faci doar asta.
Cu classesexista în prezent , poate fi doar o singură definiție cononical a unei clase în cadrul unui proiect. Deci , dacă definiți o class Foomembrii ai pus pe Footoți te. Orice definiții suplimentare Foova avea ca rezultat o eroare. Cu interfacestoate acestea, membrii sunt aditive , astfel dacă definiți interface Barcu un set de membri , puteți defini „Bar interfață“ a doua oară pentru a adăuga membri adițional la interface. Aceasta este cheia pentru sprijinirea plugin - uri jQuery într - un mod puternic tastat.
Deci , pentru a adăuga suport pentru un anumit plugin jQuery aveți de gând să nevoie pentru a crea un fișier plugin.d.ts pentru plugin - ul pe care doriți să îl utilizați. Noi folosim jQuery Șabloanele în proiectul nostru , astfel încât aici se depune jquery.tmpl.d.ts am creat pentru a adăuga suport pentru 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;
}
Ruperea acest jos , primul lucru pe care am făcut este de a defini metodele ce vor fi adăugate la JQueryinterfața. Acestea vă permit să obțineți Intellisense și tipul de verificare când tastați În $('#foo').tmpl();continuare am adăugat metode la JQueryStaticinterfața care apar atunci când tastați $.tmpl();și în final jQuery Șabloane plugin definește o parte din propriile structuri de date astfel încât am nevoie pentru a defini interfețe pentru aceste structuri.
Acum, că am interfețe suplimentare definied avem nevoie doar pentru a le face referire la fișierele Ts consumatoare. Pentru a face acest lucru vom adăuga doar referințele de mai jos în partea de sus a fișierului nostru și asta TS-l. Pentru acel fișier, typescript va vedea atât de bază metodele jQuery și metodele plugin. Dacă utilizați mai multe plugin-uri doar asigurați-vă că refernce toate fișierele plugin.d.ts individuale și ar trebui să fie bun.
/// <reference path="jquery.d.ts"/>
/// <reference path="jquery.tmpl.d.ts" />
voturi 4
4
Salvarea unui fișier nu declanșează TS automat compilare în Visual Studio. Veți avea nevoie pentru a construi / reconstrui pentru a declanșa compilarea.
Fișiere (file.d.ts declarã) permite compilatorul typescript obține informații mai bune de tip despre bibliotecile JavaScript utilizat din acel fișier. Puteți avea interfețe definite de dvs. toate într-un singur fișier, sau în mai multe fișiere; acest lucru nu ar trebui să facă nici o diferență. Puteți, de asemenea, „declara“ de tipuri / variabile pe care le utilizați din bibliotecile externe folosind ceva de genul:
declare var x: number;
care va spune compilatorului pentru a trata x ca număr.
voturi 3
3
Am fost în căutarea unui d.ts pentru jquery.inputmask și în cele din urmă a creat un simplu unul singur. Este la
https://github.com/jpirok/Typescript-jquery.inputmask
sau puteți vedea codul de mai jos.
Acesta nu va acoperi toate cazurile pentru jquery.inputmask, dar se va ocupa, probabil, cel mai mult.
///<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;
}
voturi 2
2
Înainte de a crea propriul .d.tsfișier pentru plugin - ul, ar trebui să verificați pentru a vedea dacă este deja ca DefinitelyTyped bibliotecă. De exemplu, folosind Typings , puteți rula comanda:
typings install dt~bootstrap --global --save
... și fără nici un fel de cod suplimentar veți avea acces la plugin-uri diferite Bootstrap.
În cazul în care nu au plugin-ul pe care îl căutați, luați în considerare contribuția dumneavoastră propria definiție.
voturi 0
0
Utilizarea unui .d.tsfișier de declarație este , probabil , mai bine, dar , ca o alternativă , puteți utiliza , de asemenea typescript lui augmentare și declarația globală care fuzionează pentru a adăuga metode de interfață JQuery. Puteți plasa ceva de genul următoarele în oricare dintre fișierele typescript:
declare global {
interface JQuery {
nameOfPluginMethod(arg: any): JQuery;
}
}