«Could not find a declaration file»: TypeScript को किसी भी JS मॉड्यूल के साथ कैसे जोड़ें

«अदृश्य» त्रुटि, जो हर TypeScript डेवलपर से परिचित है

आप TypeScript में कोड लिख रहे हैं, सब कुछ सुचारू रूप से चल रहा है, लेकिन अचानक — इम्पोर्ट के नीचे एक लाल लहरदार रेखा दिखाई देती है। कंपाइलर कुछ भयावह संदेश देता है: Could not find a declaration file for module 'module-name'. '/path/to/module-name.js' implicitly has an 'any' type। यदि आपने कभी TypeScript के साथ काम किया है, तो आपने निश्चित रूप से यह संदेश देखा होगा। यह तब प्रकट होता है जब आप किसी JavaScript मॉड्यूल को इम्पोर्ट करने का प्रयास करते हैं, जिसके लिए कोई डिक्लेरेशन फ़ाइल (आमतौर पर .d.ts एक्सटेंशन वाली) मौजूद नहीं होती है।

Stack Overflow पर इस प्रश्न को हज़ारों बार देखा जा चुका है। और यह कोई संयोग नहीं है: समस्या जटिल लगती है, हालाँकि वास्तव में इसके कई सरल और सुरुचिपूर्ण समाधान हैं। इस लेख में, हम यह समझेंगे कि त्रुटि क्यों होती है, और इसे ठीक करने के चार मुख्य दृष्टिकोणों की तुलना करेंगे। आप जानेंगे कि स्थिति के अनुसार कौन सा तरीका चुनना है, और «अदृश्य» प्रकारों को हमेशा के लिए भूल सकेंगे।

TypeScript को डिक्लेरेशन की आवश्यकता क्यों है?

TypeScript, JavaScript के ऊपर एक परत है जो स्थैतिक टाइपिंग जोड़ता है। जब आप import * as _ from 'lodash' लिखते हैं, तो TypeScript को पता होना चाहिए कि वेरिएबल _ के कौन से प्रकार हैं। यदि मॉड्यूल के लिए कोई .d.ts फ़ाइल नहीं है, तो कंपाइलर प्रकारों की जाँच नहीं कर सकता है, और डिफ़ॉल्ट रूप से मॉड्यूल को any प्रकार निर्दिष्ट करता है। यह टाइपिंग की कठोरता का उल्लंघन करता है, इसलिए TypeScript आपको चेतावनी देता है। वास्तव में, यह कोई रनटाइम त्रुटि नहीं है, बल्कि एक कंपाइलेशन चेतावनी है, लेकिन सख्त प्रोजेक्ट्स (strict: true) में यह बिल्ड को ब्लॉक कर सकती है।

अब आइए समाधानों पर आते हैं। हम चार दृष्टिकोणों पर विचार करेंगे, सबसे सरल से लेकर सबसे लचीले तक।

समाधान 1: त्वरित और गंदा — declare module

सबसे आसान तरीका है मैन्युअल रूप से एक डिक्लेरेशन फ़ाइल बनाना। इसके लिए, अपने प्रोजेक्ट में एक global.d.ts (या types.d.ts) फ़ाइल जोड़ें और लिखें:

// global.d.ts\ndeclare module 'module-name';

यह पंक्ति TypeScript को बताती है: «मॉड्यूल मौजूद है, लेकिन इसका प्रकार any है»। समस्या हल हो गई है, लेकिन आप टाइपिंग के सभी लाभ खो देते हैं। यह दृष्टिकोण त्वरित प्रोटोटाइप या जब मॉड्यूल का उपयोग एक या दो स्थानों पर किया जाता है, के लिए अच्छा है। हालाँकि, production प्रोजेक्ट्स के लिए यह सबसे अच्छा विकल्प नहीं है।

\n
• लाभ: न्यूनतम कोड, पैकेज स्थापित करने की आवश्यकता नहीं।
\n
• नुकसान: any प्रकार TypeScript के अर्थ को समाप्त कर देता है; यदि मॉड्यूल अपडेट होता है, तो आपको API में बदलाव के बारे में पता नहीं चलेगा।
\n

समाधान 2: @types पैकेज का उपयोग

अधिकांश लोकप्रिय npm मॉड्यूल के लिए, डिक्लेरेशन वाले अलग पैकेज मौजूद हैं। उदाहरण के लिए, lodash के लिए यह @types/lodash है। उन्हें npm या yarn के माध्यम से स्थापित करें:

npm install --save-dev @types/lodash

इसके बाद, TypeScript स्वचालित रूप से डिक्लेरेशन ढूंढ लेगा, और त्रुटि गायब हो जाएगी। यदि आप TypeScript 2.0+ का उपयोग कर रहे हैं, तो यह स्वयं @types फ़ोल्डर खोजता है। यह मानक और अनुशंसित तरीका है।

\n
• लाभ: पूर्ण टाइपिंग, सामुदायिक समर्थन, स्वचालित अपडेट।
\n
• नुकसान: सभी मॉड्यूल के लिए @types उपलब्ध नहीं हैं (उदाहरण के लिए, अल्पज्ञात लाइब्रेरी के लिए)।
\n

कैसे जाँचें कि प्रकार मौजूद हैं या नहीं? npm पेज पर जाएँ या npm info @types/मॉड्यूल-नाम चलाएँ। यदि पैकेज नहीं मिलता है, तो अगले समाधान पर जाएँ।

समाधान 3: allowJs और checkJs सक्षम करना

यदि आप एक ऐसा प्रोजेक्ट लिख रहे हैं जो TypeScript और JavaScript को मिलाता है, तो आप कंपाइलर को JS फ़ाइलों की जाँच करने की अनुमति दे सकते हैं। इसके लिए, tsconfig.json में जोड़ें:

{\n  "compilerOptions": {\n    "allowJs": true,\n    "checkJs": false\n  }\n}

allowJs विकल्प TS फ़ाइलों में JS मॉड्यूल को इम्पोर्ट करने की अनुमति देता है। इसके साथ, TypeScript प्रयास करेगा