TypeScript में declare: इसकी आवश्यकता क्यों है और इसका उपयोग कैसे करें

शुरुआती लोगों के लिए ऑनलाइन Python प्रशिक्षक

Python आसानी से सीखें बिना सिद्धांत के बोझ के। स्वचालित जांच के साथ व्यावहारिक कार्य हल करें और ब्राउज़र में सीधे कोड लिखें।

पाठ्यक्रम शुरू करें

TypeScript को declare कीवर्ड की आवश्यकता क्यों?

\n

कल्पना करें कि आप एक घर बना रहे हैं, लेकिन कुछ कमरे पहले से मौजूद हैं — उन्हें किसी और ने बनाया है (उदाहरण के लिए, JavaScript लाइब्रेरी)। आप वहाँ जाकर दीवारों को फिर से नहीं बना सकते, लेकिन आपको उनका लेआउट जानना होगा ताकि फर्नीचर सही ढंग से रख सकें। TypeScript में declare कीवर्ड बिल्कुल यही भूमिका निभाता है।

\n\n

यदि आपने कभी लोकप्रिय लाइब्रेरीज़ (jQuery, Lodash, D3.js) के साथ काम किया है, तो आपने निश्चित रूप से .d.ts फ़ाइलें देखी होंगी — ये declare की मदद से बनाए गए "लेआउट" हैं। इस लेख में हम जानेंगे कि declare क्या है, इसकी आवश्यकता क्यों है और व्यवहार में इसका उपयोग कैसे करें। तैयार हो जाइए — बहुत सारा कोड होगा और कम बकवास।

\n\n

TypeScript में declare क्या है?

\n

declare एक कीवर्ड है जो TypeScript कंपाइलर को बताता है: "अरे, यह चीज़ (वेरिएबल, फंक्शन, क्लास या मॉड्यूल) मौजूद है, लेकिन यह कहीं और परिभाषित है। बस मेरा शब्द मान लो और इसे कोड में उपयोग करने दो।"

\n\n

यह समझना महत्वपूर्ण है: declare कोई JavaScript कोड उत्पन्न नहीं करता। यह कंपाइलर के लिए पूरी तरह से सूचनात्मक निर्माण है। यदि आप declare const x: number = 5 लिखते हैं, तो कंपाइलेशन के बाद x गायब हो जाएगा — यह अंतिम फ़ाइल में नहीं होगा।

\n\n

इसकी आवश्यकता कब होती है?

\n
    \n
  • ग्लोबल वेरिएबल्स के साथ काम करना — उदाहरण के लिए, window, document या CDN के माध्यम से जोड़े गए वेरिएबल्स।
  • \n
  • JavaScript लाइब्रेरीज़ को टाइप करना — जब लाइब्रेरी शुद्ध JS में लिखी गई हो, लेकिन आप इसे TypeScript के साथ उपयोग करना चाहते हैं।
  • \n
  • कॉन्फ़िगरेशन फ़ाइलों के लिए टाइप बनाना — CSS मॉड्यूल, इमेज, JSON फ़ाइलें।
  • \n
\n\n

declare का सिंटैक्स: बुनियादी उदाहरण

\n\n

1. वेरिएबल्स की डिक्लेरेशन

\n

मान लीजिए, आपके पास एक ग्लोबल वेरिएबल VERSION है, जो HTML फ़ाइल में <script> के माध्यम से परिभाषित है। TypeScript को इसके बारे में कुछ नहीं पता, इसलिए आप लिखते हैं:

\n
declare const VERSION: string;\n\nconsole.log(VERSION); // ठीक है, TypeScript जानता है कि यह एक स्ट्रिंग है\n
\n

कंपाइलेशन के बाद declare const VERSION: string गायब हो जाएगा, लेकिन console.log(VERSION) रहेगा।

\n\n

2. फंक्शन्स की डिक्लेरेशन

\n

कल्पना करें कि आपके पास एनालिटिक्स से एक ग्लोबल फंक्शन trackEvent है:

\n
declare function trackEvent(eventName: string, properties?: Record<string, any>): void;\n\n// उपयोग\ntrackEvent("button_click", { buttonId: "submit" });\n
\n

कंपाइलर कार्यान्वयन की जाँच नहीं करेगा — वह केवल सिग्नेचर जानता है।

\n\n

3. क्लासेस की डिक्लेरेशन

\n

लाइब्रेरी ग्लोबल नेमस्पेस से Moment क्लास प्रदान करती है:

\n
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\n

4. मॉड्यूल्स की डिक्लेरेशन

\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\n

declare और .d.ts फ़ाइलें

\n

.d.ts एक्सटेंशन वाली फ़ाइलें (टाइप डिक्लेरेशन) declare कीवर्ड का "निवास स्थान" हैं। इनमें केवल घोषणाएँ होती हैं और ये JavaScript में कंपाइल नहीं होतीं। आमतौर पर ये types/ फ़ोल्डर में होती हैं या लाइब्रेरी के साथ आती हैं (उदाहरण के लिए, @types/lodash)।

\n\n

उदाहरण: jQuery के लिए टाइप बनाना

\n

ब्लॉग

पुस्तक अनुशंसाएँ