Podczas korzystania maszynopis muszę zaimportować plugin.d.ts na każde zewnętrzne js że używam? Innymi słowy, muszę stworzyć jQuery.d.ts ze wszystkimi interfejsami?
Używanie wtyczki jQuery w maszynopisie
głosy
66
5 odpowiedzi
głosy 98
98
Problem z wtyczek jQuery (i innych bibliotek opartych wtyczki) jest to, że nie tylko trzeba plik library.d.ts dla biblioteki bazy, ale trzeba także plik plugin.d.ts dla każdej wtyczki. I jakoś Tes plugin.d.ts pliki potrzebne do rozszerzenia biblioteki interfejsów zdefiniowanych w plikach library.d.ts. Na szczęście, maszynopis ma fajną funkcję, która pozwala nie tylko to.
Ze classesistnieje obecnie może być tylko jeden cononical definicja klasy w ramach projektu. Więc jeśli zdefiniować class Fooczłonków umieścić na Footo wszystko dostać. Wszelkie dodatkowe definicje Foospowoduje wystąpienie błędu. Dzięki interfacesjednak członkowie są addytywne, więc jeśli można zdefiniować interface Barza pomocą zestawu elementów można zdefiniować „interfejs bar” po raz drugi, aby dodać do dodatkowych członków interface. To jest klucz do wspierania wtyczek jQuery w silnie wpisany sposób.
Tak aby dodać wsparcie dla danego jQuery plugin masz zamiar trzeba utworzyć plik plugin.d.ts dla wtyczki, której chcesz użyć. Używamy jQuery Szablony w naszym projekcie tak oto plik jquery.tmpl.d.ts stworzyliśmy aby dodać wsparcie dla tej wtyczki:
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;
}
Breaking down to pierwszą rzeczą jaką zrobił to określenie metod, które zostaną dodane do JQueryinterfejsu. Te pozwalają uzyskać intellisense i wpisz sprawdzanie po wpisaniu $('#foo').tmpl();Następnie dodaliśmy metod do JQueryStaticinterfejsu, który pojawi się, gdy wpiszesz $.tmpl();I wreszcie jQuery Templates wtyczki definiuje niektóre ze swoich własnych struktur danych, więc potrzebne do definiowania interfejsów do tych struktur.
Teraz, gdy mamy dodatkowe interfejsy zdefiniowana musimy tylko odwoływać się do nich z spożywających plików .TS. Aby to zrobić po prostu dodać odniesienia poniżej górnej części naszego pliku .TS i to wszystko. Dla tego pliku, maszynopis będzie zobaczyć zarówno bazowych metod jQuery i metod wtyczki. Jeśli korzystasz z wielu wtyczek tylko upewnij się refernce wszystkich pojedynczych plików plugin.d.ts i powinno być dobrze.
/// <reference path="jquery.d.ts"/>
/// <reference path="jquery.tmpl.d.ts" />
głosy 4
4
Zapisywanie .TS plik nie zostanie automatycznie wyzwalać kompilacji w Visual Studio. Trzeba będzie budować / odbudować wyzwolić kompilacji.
Zadeklaruj pliki (file.d.ts) pozwala kompilator maszynopis uzyskać lepsze informacje o typie temat bibliotek JavaScript używasz z tego pliku. Możesz mieć swoje interfejsy zdefiniowane w jednym pliku, lub w wielu plikach; Nie powinno to żadnej różnicy. Można również „zadeklarować” rodzajów / zmienne używasz z zewnętrznych bibliotek wykorzystujących coś takiego:
declare var x: number;
który powie kompilator traktować X jako liczba.
głosy 3
3
Szukałem przez d.ts dla jquery.inputmask i wreszcie stworzył prostą jeden z moich własnych. To na
https://github.com/jpirok/Typescript-jquery.inputmask
czy można zobaczyć poniżej kod.
Nie obejmie wszystkie przypadki dla jquery.inputmask, ale prawdopodobnie będzie obsługiwać większość.
///<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;
}
głosy 2
2
Przed utworzeniem własnego .d.tspliku do wtyczki, należy sprawdzić, czy to już jako DefinitelyTyped bibliotece. Na przykład za pomocą typowania , można uruchomić polecenie:
typings install dt~bootstrap --global --save
... i bez żadnego dodatkowego kodu będziesz mieć dostęp do różnych Bootstrap wtyczek.
Jeśli nie masz wtyczki, której szukasz, rozważyć zamieszczenie własną definicję.
głosy 0
0
Korzystanie z .d.tspliku deklaracja jest chyba lepiej, ale jako alternatywę można również użyć maszynopis za globalny powiększania i deklaracja scalanie dodać metody do interfejsu jQuery. Możesz umieścić coś jak następuje w którymkolwiek z plików maszynopis:
declare global {
interface JQuery {
nameOfPluginMethod(arg: any): JQuery;
}
}