टाइपप्रति का उपयोग करते समय मैं हर बाहरी js है कि मैं का उपयोग के लिए एक plugin.d.ts आयात करने के लिए की जरूरत है? दूसरे शब्दों में, मैं सभी इंटरफेस के साथ एक jQuery.d.ts बनाने की जरूरत है?
टाइपप्रति में jQuery प्लगइन का उपयोग करना
वोट
66
5 जवाब
वोट 98
98
jQuery प्लगइन्स (और अन्य प्लगइन आधारित पुस्तकालयों) के साथ मुद्दा यह है कि न केवल आप आधार पुस्तकालय के लिए एक library.d.ts फ़ाइल की आवश्यकता है, लेकिन आप भी एक प्लगइन के लिए एक plugin.d.ts फ़ाइल की आवश्यकता है। और किसी भी तरह एचटीएमएल plugin.d.ts फ़ाइलों library.d.ts फाइलों में परिभाषित पुस्तकालय इंटरफेस का विस्तार करने की जरूरत है। सौभाग्य से, टाइपप्रति एक गंधा छोटे सुविधा ठीक यही करने की सुविधा देता है है।
साथ classesवहाँ वर्तमान में केवल एक परियोजना के भीतर एक वर्ग के एकल cononical परिभाषा हो सकती है। तो अगर आप एक को परिभाषित class Fooसदस्यों को आप पर डाल Fooसब आपको मिल रहे हैं। के किसी भी अतिरिक्त परिभाषाएँ Fooएक त्रुटि का परिणाम देगा। साथ interfaces, तथापि, सदस्यों additive इसलिए यदि आप को परिभाषित कर रहे हैं interface Barके सदस्यों में से एक सेट के साथ आप 'इंटरफ़ेस बार' के लिए अतिरिक्त सदस्य जोड़ने के लिए दूसरी बार परिभाषित कर सकते हैं interface। यही कारण है कि एक जोरदार टाइप किया रास्ते में jQuery प्लगइन्स समर्थन की कुंजी है।
तो एक दिया jQuery प्लगइन आप आप उपयोग करना चाहते प्लगइन के लिए एक 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 टेम्पलेट्स प्लगइन का अपना डेटा संरचनाओं में से कुछ तो हम उन संरचनाओं के लिए इंटरफेस को परिभाषित करने की जरूरत को परिभाषित करता है।
अब अतिरिक्त इंटरफेस definied हम किया है कि हम सिर्फ उन्हें लेने वाली .ts फाइलों से संदर्भित करने के लिए की जरूरत है। कि हम सिर्फ हमारे .ts फ़ाइल के शीर्ष करने के लिए नीचे संदर्भ जोड़ सकते हैं और बस इतना ही ऐसा करने के लिए। उस फ़ाइल के लिए, टाइपप्रति दोनों आधार jQuery के तरीकों और प्लगइन तरीकों देखेंगे। आप एक से अधिक प्लग-इन का उपयोग करते हैं बस सुनिश्चित करें कि आप अपने व्यक्तिगत plugin.d.ts फ़ाइलों के सभी refernce बनाने के लिए और आप अच्छा होना चाहिए।
/// <reference path="jquery.d.ts"/>
/// <reference path="jquery.tmpl.d.ts" />
वोट 4
4
एक .ts फ़ाइल सहेज रहा है स्वचालित रूप से दृश्य स्टूडियो में संकलन को गति प्रदान नहीं करता है। आप का निर्माण / संकलन को गति प्रदान करने के पुनर्निर्माण के लिए की आवश्यकता होगी।
घोषित फ़ाइलें (file.d.ts) टाइपप्रति संकलक आपको लगता है कि फ़ाइल से उपयोग कर रहे हैं JavaScript लाइब्रेरी के बारे में बेहतर प्रकार की जानकारी प्राप्त करने देता है। आप अपने इंटरफेस परिभाषित एक फ़ाइल में सभी, या एक से अधिक फ़ाइलों में हो सकता है; इस कोई फर्क नहीं करना चाहिए। तुम भी "घोषित" कर सकते हैं की तरह कुछ का उपयोग कर बाहरी पुस्तकालयों से उपयोग कर रहे हैं प्रकार / चर:
declare var x: number;
जो एक संख्या के रूप में एक्स के इलाज के लिए संकलक बता देंगे।
वोट 3
3
मैं jquery.inputmask के लिए एक d.ts तलाश रहे हैं और अंत में मेरी खुद की एक साधारण एक बनाया। यह पर है
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 , आप आदेश चला सकते हैं:
typings install dt~bootstrap --global --save
... और किसी भी अतिरिक्त कोड के बिना आप विभिन्न बूटस्ट्रैप plugins का लाभ उठा सकेंगे।
वे प्लगइन आप देख रहे हैं नहीं है, तो, अपने खुद के परिभाषा योगदान पर विचार करें।
वोट 0
0
एक का उपयोग करते हुए .d.tsघोषणा फ़ाइल शायद बेहतर है, लेकिन एक विकल्प के रूप में आप भी टाइपप्रति के उपयोग कर सकते हैं वैश्विक वृद्धि और घोषणा विलय JQuery के इंटरफ़ेस करने के तरीकों को जोड़ने के लिए। आप अपने टाइपप्रति फ़ाइलों में से किसी में निम्नलिखित की तरह कुछ जगह कर सकते हैं:
declare global {
interface JQuery {
nameOfPluginMethod(arg: any): JQuery;
}
}