Når du bruker Loggfila må jeg importere en plugin.d.ts for hver eksterne js som jeg bruker? Med andre ord, må jeg lage en jQuery.d.ts med alle grensesnitt?
Ved hjelp av jQuery plugin i Loggfila
stemmer
67
5 svar
stemmer 98
98
Problemet med jQuery plugins (og andre plugin baserte biblioteker) er at ikke bare trenger du en library.d.ts fil for basen biblioteket, men du trenger også en plugin.d.ts fil for hver plugin. Og en eller annen måte thes plugin.d.ts filer trenger å utvide biblioteket grensesnitt definert i library.d.ts filer. Heldigvis har Loggfila en kjekk liten funksjon som lar deg gjøre nettopp det.
Med classesdet i dag kan bare være en enkelt cononical definisjon av en klasse i et prosjekt. Så hvis du definerer en class Foomedlemmene du legger på Fooer alt du får. Eventuelle andre definisjoner av Foovil resultere i en feil. Med interfacesimidlertid medlemmene er additive, så hvis du definerer interface Baret sett av medlemmer kan du definere 'grensesnitt Bar' en gang til for å legge til flere medlemmer til interface. Det er nøkkelen til å støtte jQuery plugins i en sterkt skrevet måte.
Så for å legge til støtte for en gitt jQuery plugin du kommer til å trenge for å lage en plugin.d.ts filen for plugin du ønsker å bruke. Vi bruker jQuery Maler i vårt prosjekt så her er jquery.tmpl.d.ts filen vi opprettet for å legge til støtte for at 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;
}
Bryte dette ned det første vi gjorde er å definere metodene som blir lagt til i JQuerygrensesnittet. Disse kan du få IntelliSense og skriv sjekke når du skriver $('#foo').tmpl();Neste vi lagt metoder til JQueryStaticgrensesnittet som dukker opp når du skriver $.tmpl();Og til slutt jQuery Maler plugin definerer noen av sine egne datastrukturer så vi trengte å definere grensesnitt for disse strukturene.
Nå som vi har ekstra grensesnitt definied vi trenger bare å referere dem fra forbruker Ts filer. For å gjøre det vi bare legge referansene nedenfor til toppen av vår ts filen og det er det. For denne filen, vil Loggfila se både grunn jQuery metoder og plugin metoder. Hvis du bruker flere plugins bare sørg for at du refernce alle dine individuelle plugin.d.ts filer og du bør være god.
/// <reference path="jquery.d.ts"/>
/// <reference path="jquery.tmpl.d.ts" />
stemmer 4
4
Lagre en ts filen ikke automatisk utløse kompilering i Visual Studio. Du må bygge / gjenoppbygge å utløse samling.
Erklærer filer (file.d.ts) lar Loggfila kompilatoren få bedre typen informasjon om Javascript-biblioteker de du bruker fra denne filen. Du kan få grensesnitt definert alt i én fil, eller i flere filer; dette bør ikke gjøre noen forskjell. Du kan også "erklærer" de typer / variablene du bruker fra eksterne biblioteker som bruker noe sånt som:
declare var x: number;
som vil fortelle kompilatoren å behandle x som et tall.
stemmer 3
3
Jeg har vært på jakt etter en d.ts for jquery.inputmask og til slutt laget en enkel en av mine egne. Det er på
https://github.com/jpirok/Typescript-jquery.inputmask
eller du kan se koden under.
Det vil ikke dekke alle tilfeller for jquery.inputmask, men vil trolig håndtere det meste.
///<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;
}
stemmer 2
2
Før du oppretter din egen .d.tsfil for plugin, bør du sjekke for å se om det er allerede som DefinitelyTyped bibliotek. For eksempel bruker typings , kan du kjøre kommandoen:
typings install dt~bootstrap --global --save
... og uten noen ekstra kode vil du få tilgang til de ulike bootstrap plugins.
Hvis de ikke har plugin du leter etter, kan du vurdere å bidra med din egen definisjon.
stemmer 1
1
Ved hjelp av en .d.tserklæring fil er trolig bedre, men som et alternativ kan du også bruke Loggfila sin globale silikonpupper og erklæring sammenslåing å legge metoder for å JQuery grensesnitt. Du kan plassere noe sånt som følgende i noen av dine Loggfila filer:
declare global {
interface JQuery {
nameOfPluginMethod(arg: any): JQuery;
}
}