TypeScript को declare कीवर्ड की आवश्यकता क्यों?
\nकल्पना करें कि आप एक घर बना रहे हैं, लेकिन कुछ कमरे पहले से मौजूद हैं — उन्हें किसी और ने बनाया है (उदाहरण के लिए, JavaScript लाइब्रेरी)। आप वहाँ जाकर दीवारों को फिर से नहीं बना सकते, लेकिन आपको उनका लेआउट जानना होगा ताकि फर्नीचर सही ढंग से रख सकें। TypeScript में declare कीवर्ड बिल्कुल यही भूमिका निभाता है।
यदि आपने कभी लोकप्रिय लाइब्रेरीज़ (jQuery, Lodash, D3.js) के साथ काम किया है, तो आपने निश्चित रूप से .d.ts फ़ाइलें देखी होंगी — ये declare की मदद से बनाए गए "लेआउट" हैं। इस लेख में हम जानेंगे कि declare क्या है, इसकी आवश्यकता क्यों है और व्यवहार में इसका उपयोग कैसे करें। तैयार हो जाइए — बहुत सारा कोड होगा और कम बकवास।
TypeScript में declare क्या है?
\ndeclare एक कीवर्ड है जो TypeScript कंपाइलर को बताता है: "अरे, यह चीज़ (वेरिएबल, फंक्शन, क्लास या मॉड्यूल) मौजूद है, लेकिन यह कहीं और परिभाषित है। बस मेरा शब्द मान लो और इसे कोड में उपयोग करने दो।"
यह समझना महत्वपूर्ण है: declare कोई JavaScript कोड उत्पन्न नहीं करता। यह कंपाइलर के लिए पूरी तरह से सूचनात्मक निर्माण है। यदि आप declare const x: number = 5 लिखते हैं, तो कंपाइलेशन के बाद x गायब हो जाएगा — यह अंतिम फ़ाइल में नहीं होगा।
इसकी आवश्यकता कब होती है?
\n- \n
- ग्लोबल वेरिएबल्स के साथ काम करना — उदाहरण के लिए,
window,documentया CDN के माध्यम से जोड़े गए वेरिएबल्स। \n - JavaScript लाइब्रेरीज़ को टाइप करना — जब लाइब्रेरी शुद्ध JS में लिखी गई हो, लेकिन आप इसे TypeScript के साथ उपयोग करना चाहते हैं। \n
- कॉन्फ़िगरेशन फ़ाइलों के लिए टाइप बनाना — CSS मॉड्यूल, इमेज, JSON फ़ाइलें। \n
declare का सिंटैक्स: बुनियादी उदाहरण
\n\n1. वेरिएबल्स की डिक्लेरेशन
\nमान लीजिए, आपके पास एक ग्लोबल वेरिएबल VERSION है, जो HTML फ़ाइल में <script> के माध्यम से परिभाषित है। TypeScript को इसके बारे में कुछ नहीं पता, इसलिए आप लिखते हैं:
declare const VERSION: string;\n\nconsole.log(VERSION); // ठीक है, TypeScript जानता है कि यह एक स्ट्रिंग है\n\nकंपाइलेशन के बाद declare const VERSION: string गायब हो जाएगा, लेकिन console.log(VERSION) रहेगा।
2. फंक्शन्स की डिक्लेरेशन
\nकल्पना करें कि आपके पास एनालिटिक्स से एक ग्लोबल फंक्शन trackEvent है:
declare function trackEvent(eventName: string, properties?: Record<string, any>): void;\n\n// उपयोग\ntrackEvent("button_click", { buttonId: "submit" });\n\nकंपाइलर कार्यान्वयन की जाँच नहीं करेगा — वह केवल सिग्नेचर जानता है।
\n\n3. क्लासेस की डिक्लेरेशन
\nलाइब्रेरी ग्लोबल नेमस्पेस से Moment क्लास प्रदान करती है:
declare class Moment {\n constructor(date: string);\n format(pattern: string): string;\n}\n\n// उपयोग\nconst now = new Moment("2024-01-01");\nconsole.log(now.format("YYYY-MM-DD"));\n\n\n4. मॉड्यूल्स की डिक्लेरेशन
\nयह सबसे सामान्य परिदृश्य है। उदाहरण के लिए, आपके पास CSS मॉड्यूल या JSON फ़ाइलें हैं:
\n// styles.d.ts\ndeclare module "*.css" {\n const styles: Record<string, string>;\n export default styles;\n}\n\n// images.d.ts\ndeclare module "*.png" {\n const src: string;\n export default src;\n}\n\nअब आप बिना TypeScript त्रुटियों के CSS और इमेजेज़ को इम्पोर्ट कर सकते हैं।
\n\ndeclare और .d.ts फ़ाइलें
\n.d.ts एक्सटेंशन वाली फ़ाइलें (टाइप डिक्लेरेशन) declare कीवर्ड का "निवास स्थान" हैं। इनमें केवल घोषणाएँ होती हैं और ये JavaScript में कंपाइल नहीं होतीं। आमतौर पर ये types/ फ़ोल्डर में होती हैं या लाइब्रेरी के साथ आती हैं (उदाहरण के लिए, @types/lodash)।
उदाहरण: jQuery के लिए टाइप बनाना
\n