Όταν χρησιμοποιείτε γραφομηχανή χρειάζομαι για να εισάγει ένα plugin.d.ts για κάθε εξωτερική js που μπορώ να χρησιμοποιήσω; Με άλλα λόγια, χρειάζεται να δημιουργήσετε ένα jQuery.d.ts με όλες τις διασυνδέσεις;
Χρησιμοποιώντας jQuery plugin σε γραφομηχανή
ψήφοι
66
5 απαντήσεις
ψήφοι 98
98
Το θέμα με jQuery plugins (και άλλες βιβλιοθήκες με βάση plugin) είναι ότι όχι μόνο θα πρέπει να έχετε ένα αρχείο library.d.ts για τη βιβλιοθήκη βάσης, αλλά θα πρέπει επίσης ένα αρχείο plugin.d.ts για κάθε plugin. Και κατά κάποιο τρόπο θες plugin.d.ts αρχεία πρέπει να επεκτείνουν τις διασυνδέσεις της βιβλιοθήκης ορίζεται στα αρχεία library.d.ts. Ευτυχώς, γραφομηχανή έχει ένα ικανό μικρό χαρακτηριστικό που σας επιτρέπει να κάνετε ακριβώς αυτό.
Με classesυπάρχει προς το παρόν μπορεί να είναι μόνο ένα cononical ορισμό της κατηγορίας στο πλαίσιο ενός έργου. Έτσι, εάν έχετε ορίσει ένα class Fooαπό τα μέλη σας βάλει σε Fooόλοι που παίρνετε. Τυχόν πρόσθετοι ορισμοί της Fooθα οδηγήσει σε σφάλμα. Με interfaces, όμως, τα μέλη της είναι πρόσθετο έτσι αν έχετε ορίσει interface Barένα σύνολο των μελών μπορείτε να ορίσετε «Bar περιβάλλον» για δεύτερη φορά για να προσθέσετε επιπλέον μέλη για να το interface. Αυτό είναι το κλειδί για την υποστήριξη jQuery plugins σε μια έντονα δακτυλογραφημένη τρόπο.
Έτσι για να προσθέσετε υποστήριξη για μια δεδομένη jQuery plugin θα πάμε να πρέπει να δημιουργήσετε ένα αρχείο plugin.d.ts για το πρόγραμμα που θέλετε να χρησιμοποιήσετε. Χρησιμοποιούμε jQuery πρότυπα στο έργο μας, έτσι και εδώ είναι το αρχείο jquery.tmpl.d.ts που δημιουργήθηκε για να προσθέσετε υποστήριξη για αυτό το πρόγραμμα:
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;
}
Σπάζοντας αυτό κάτω το πρώτο πράγμα που κάναμε είναι να καθορίσει τις μεθόδους που θα προστεθούν στο JQueryπεριβάλλον. Αυτές σας επιτρέπουν να πάρετε intellisense και πληκτρολογήστε τον έλεγχο όταν πληκτρολογείτε $('#foo').tmpl();συνέχεια προσθέσαμε μεθόδους για τη JQueryStaticδιασύνδεση που εμφανίζεται όταν πληκτρολογείτε $.tmpl();Και, τέλος, η jQuery Πρότυπα plugin ορίζει κάποιες από τις δικές του δομές δεδομένων έτσι απαιτούνται για τον καθορισμό των διεπαφών για αυτές τις δομές.
Τώρα που έχουμε τα πρόσθετα διεπαφές αυτό ορίζεται εμείς απλά πρέπει να τους αναφορά από τα κατανάλωση TS φακέλους. Για να το κάνετε αυτό απλά προσθέστε τα στοιχεία κάτω από την κορυφή του αρχείου .ts μας και αυτό είναι όλο. Για το αρχείο, γραφομηχανή θα δείτε τόσο η βάση μεθόδους jQuery και τις μεθόδους plugin. Εάν χρησιμοποιείτε πολλές plugins απλά φροντίστε να refernce όλα τα μεμονωμένα αρχεία plugin.d.ts σας και θα πρέπει να είναι καλό.
/// <reference path="jquery.d.ts"/>
/// <reference path="jquery.tmpl.d.ts" />
ψήφοι 4
4
Αποθήκευση ενός αρχείου .ts δεν συνεπάγεται αυτόματα κατάρτιση στο Visual Studio. Θα πρέπει να οικοδομήσουμε / rebuild για να προκαλέσει την κατάρτιση.
Δηλώστε αρχεία (file.d.ts) αφήνει ο compiler γραφομηχανή έχουμε καλύτερη πληροφόρηση τύπου σχετικά με τις βιβλιοθήκες JavaScript που χρησιμοποιείτε από το αρχείο. Μπορείτε να έχετε διασυνδέσεις σας ορίζονται όλα σε ένα αρχείο, ή σε πολλαπλά αρχεία? αυτό δεν πρέπει να κάνει καμία διαφορά. Μπορείτε επίσης να «δηλώσει» τα είδη / μεταβλητές που χρησιμοποιείτε από εξωτερικές βιβλιοθήκες χρησιμοποιώντας κάτι σαν:
declare var x: number;
το οποίο θα πει ο compiler για τη θεραπεία x ως αριθμός.
ψήφοι 3
3
Έχω ήδη ψάχνει για ένα d.ts για jquery.inputmask και τελικά να δημιουργήσει ένα απλό ένα από τα δικά μου. Είναι στο
https://github.com/jpirok/Typescript-jquery.inputmask
ή μπορείτε να δείτε τον παρακάτω κώδικα.
Δεν θα καλύπτει όλες τις περιπτώσεις για jquery.inputmask, αλλά θα χειριστεί κατά πάσα πιθανότητα οι περισσότεροι.
///<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;
}
ψήφοι 2
2
Πριν από τη δημιουργία του δικού σας .d.tsαρχείου για το πρόγραμμα, θα πρέπει να ελέγξετε για να δείτε αν είναι ήδη ως DefinitelyTyped βιβλιοθήκη. Για παράδειγμα, χρησιμοποιώντας τυποποιήσεις , μπορείτε να εκτελέσετε την εντολή:
typings install dt~bootstrap --global --save
... και χωρίς καμία επιπλέον κώδικα που θα έχουν πρόσβαση στα διάφορα Bootstrap plugins.
Εάν δεν έχετε το plugin που ψάχνετε, να εξετάσει τη συμβολή τη δική σας ορισμό.
ψήφοι 0
0
Χρησιμοποιώντας ένα .d.tsαρχείο δήλωσης είναι μάλλον καλύτερα, αλλά ως εναλλακτική λύση, μπορείτε επίσης να χρησιμοποιήσετε γραφομηχανή της παγκόσμιας αύξησης και της δήλωσης συγχώνευση για να προσθέσετε μεθόδους για την διασύνδεση JQuery του. Μπορείτε να τοποθετήσετε κάτι σαν το παρακάτω σε κάποια από τα αρχεία γραφομηχανή σας:
declare global {
interface JQuery {
nameOfPluginMethod(arg: any): JQuery;
}
}