tsconfig.json में पथ: TypeScript के हुड के नीचे क्या छिपा है

TypeScript में एलियास आपके जीवन के घंटे कैसे बचाते हैं

क्या आपने कभी ऐसा कुछ लिखा है import UserService from '../../../../../services/UserService'? यदि हाँ — तो आप इस दर्द को जानते हैं। आँखें भटक जाती हैं, रिफैक्टरिंग एक दुःस्वप्न बन जाती है, और फ़ाइल का कोई भी स्थानांतरण आयात की पूरी श्रृंखला को तोड़ देता है। सौभाग्य से, TypeScript (और इसका कॉन्फ़िगरेशन फ़ाइल tsconfig.json) एक सुरुचिपूर्ण समाधान प्रदान करता है — paths।

लेकिन सवाल यह है: यह हुड के नीचे कैसे काम करता है? क्यों, एलियास "@/*" लिखने के बाद, आप import { UserService } from '@/services/UserService' लिख सकते हैं? और मुख्य बात — यह कभी-कभी बिल्डर (webpack, Vite, Rollup) की अतिरिक्त सेटिंग्स के बिना काम क्यों नहीं करता?

इस लेख में, हम केवल यह नहीं दिखाएंगे कि tsconfig.json में paths कैसे सेट करें। हम तंत्र के अंदर झाँकेंगे, path mapping को समझेंगे, जानेंगे कि TypeScript मॉड्यूल को कैसे हल करता है, और सामान्य गलतियों से बचना सीखेंगे।

tsconfig.json में paths क्या है?

Paths tsconfig.json में एक सेक्शन है जो आपको आयात उपनामों और फ़ाइलों के वास्तविक पथों के बीच कस्टम मैपिंग सेट करने की अनुमति देता है। सीधे शब्दों में कहें, तो आप TypeScript से कहते हैं: «जब आप @utils/ से शुरू होने वाला आयात देखते हैं, तो वास्तव में src/utils/ फ़ोल्डर में फ़ाइल ढूँढ़ें»।

कोड में यह इस तरह दिखता है:

// tsconfig.json\n{\n  "compilerOptions": {\n    "baseUrl": ".",\n    "paths": {\n      "@/*": ["src/*"],\n      "@utils/*": ["src/utils/*"],\n      "@components/*": ["src/components/*"]\n    }\n  }\n}\n

अब भयानक सापेक्ष पथों के बजाय आप लिखते हैं:

// पहले था (दुःस्वप्न)\nimport { formatDate } from '../../../../utils/dateHelpers';\n\n// अब है (सुंदरता)\nimport { formatDate } from '@utils/dateHelpers';\n

मान गए, अंतर बहुत बड़ा है। लेकिन TypeScript कैसे समझता है कि कहाँ जाना है?

हुड के नीचे मॉड्यूल रिज़ॉल्विंग कैसे काम करता है

TypeScript में path mapping को समझने के लिए, हमें resolution (मॉड्यूल रिज़ॉल्यूशन) के मूल तंत्र को समझना होगा। जब TypeScript आपके कोड को कंपाइल करता है, तो यह Node.js के समान एक रणनीति का उपयोग करता है, लेकिन अतिरिक्त क्षमताओं के साथ।

प्रक्रिया इस प्रकार है:

\n
1. पूर्ण पथ की जाँच (/ से शुरू होता है) — यदि हाँ, तो फ़ाइल सिस्टम की जड़ से खोजता है।
\n
2. सापेक्ष पथ की जाँच (./ या ../ से शुरू होता है) — वर्तमान फ़ाइल के सापेक्ष हल करता है।
\n
3. paths से एलियास की जाँच — यदि आयात paths में परिभाषित उपसर्ग से शुरू होता है, तो TypeScript इसे मैपिंग से संबंधित पथ से बदल देता है।
\n
4. node_modules में खोज — यदि कुछ भी मेल नहीं खाता है, तो मॉड्यूल को npm-पैकेज के रूप में खोजता है।
\n

मुख्य बिंदु: TypeScript स्वयं संकलित JavaScript में भौतिक पथ नहीं बदलता है। यह केवल प्रकारों की जाँच करता है और यदि फ़ाइल नहीं मिलती है तो त्रुटियाँ देता है। और रनटाइम में एलियास को वास्तविक पथों से बदलना बिल्डर (webpack, Vite, tsc-alias) का काम है।

paths «बॉक्स से बाहर» क्यों काम नहीं करते?

यह Stack Overflow पर सबसे आम प्रश्न है: «मैंने paths सेट किया, लेकिन एप्लिकेशन चलाने पर "Cannot find module" त्रुटि आती है»। कारण सरल है: TypeScript एक ट्रांसपाइलर है, बंडलर नहीं।

जब आप tsc चलाते हैं, तो यह JS फ़ाइलें उत्पन्न करता है, लेकिन एलियास को अछूता छोड़ देता है। उदाहरण के लिए, import { foo } from '@utils/bar' JS में वैसे ही रहेगा। Node.js (या ब्राउज़र) को पता नहीं है कि @utils क्या है, और त्रुटि देता है।

इसे ठीक करने के लिए, आपको निम्नलिखित समाधानों में से एक का उपयोग करना होगा:

\n
• tsc-alias — एक उपयोगिता जो संकलन के बाद एलियास को वास्तविक पथों से बदल देती है।
\n
• module-alias — N