TypeScript में export default vs export: क्या चुनें?

TypeScript export vs default export: एक बार और हमेशा के लिए समझें

नमस्ते दोस्त! अगर आप TypeScript में अपना सफर शुरू कर रहे हैं (या थोड़ा अनुभव है, लेकिन export में अभी भी कन्फ्यूजन है), तो यह लेख आपके लिए ही है। "TypeScript export vs default export" का सवाल Stack Overflow पर सबसे ज्यादा पूछे जाने वाले सवालों में से एक है। यह छोटी सी चीज़ लगती है, लेकिन इसे लेकर कितनी बहस होती है! चलिए, इसे आसान भाषा में समझते हैं और हमेशा के लिए याद रखते हैं कि कब export और कब export default का उपयोग करना चाहिए।

हम सिर्फ नियमों को रटेंगे नहीं। हम रियल-लाइफ उदाहरणों, शुरुआती लोगों की आम गलतियों और ठोस सुझावों के साथ इसे समझेंगे। चलिए शुरू करते हैं!

TypeScript में export क्या है और इसकी ज़रूरत क्यों है?

मान लीजिए, आप एक बड़ा प्रोग्राम लिख रहे हैं। क्या आप सारा कोड एक ही फाइल में डालेंगे? बिल्कुल नहीं। आप इसे मॉड्यूल्स में बांटेंगे: एक फाइल यूज़र्स के लिए, दूसरी कैलकुलेशन के लिए, तीसरी इंटरफेस के लिए। Export एक तरीका है TypeScript को बताने का: "अरे, इस फंक्शन, क्लास या वेरिएबल को दूसरी फाइलों में भी इस्तेमाल किया जा सकता है।" और import का मतलब है: "मुझे दूसरी फाइल से यह चीज़ लेने दो।"

TypeScript में दो मुख्य प्रकार के export होते हैं: named export (नामांकित एक्सपोर्ट) और default export (डिफ़ॉल्ट एक्सपोर्ट)। और यहीं से असली मज़ा शुरू होता है।

Named Export (नामांकित एक्सपोर्ट) — सटीकता और व्यवस्था

Named export का मतलब है कि आप स्पष्ट रूप से बताते हैं कि आप क्या एक्सपोर्ट कर रहे हैं। यह ऐसा है जैसे आप अपने गैरेज के हर डिब्बे पर एक लेबल लगा दें: "औज़ार", "खेल का सामान", "पुरानी किताबें"।

इसका सिंटैक्स बहुत आसान है। बस export कीवर्ड को डिक्लेरेशन से पहले लगाएं:

Named Export का उदाहरण

// utils.ts\nexport const PI = 3.14159;\n\nexport function calculateArea(radius: number): number {\n  return PI * radius * radius;\n}\n\nexport class Circle {\n  constructor(public radius: number) {}\n}

अब इसे दूसरी फाइल में इम्पोर्ट करते हैं:

// app.ts\nimport { PI, calculateArea, Circle } from './utils';\n\nconsole.log(PI); // 3.14159\nconst area = calculateArea(5);\nconst myCircle = new Circle(10);

ध्यान दें: इम्पोर्ट करते समय { } (कर्ली ब्रेसेस) का उपयोग होता है। यह named export की पहचान है। आप सिर्फ वही इम्पोर्ट कर सकते हैं जो आपको चाहिए, और आपको उन्हीं नामों का उपयोग करना होगा जो एक्सपोर्ट करते समय दिए गए थे (हाँ, as से रीनेम कर सकते हैं, लेकिन बाद में देखेंगे)।

Named Export के फायदे

\n
• स्पष्टता: आप हमेशा देख सकते हैं कि मॉड्यूल से क्या एक्सपोर्ट हो रहा है।
\n
• ऑटो-कम्पलीशन: IDE (जैसे VS Code) इम्पोर्ट करते समय नाम सुझाता है।
\n
• रीफैक्टरिंग: अगर आप एक्सपोर्टेड फंक्शन का नाम बदलते हैं, तो IDE सभी जगहों पर इसे बदल देगा। यह सुरक्षित है।
\n
• Tree-shaking: बंडलर (Webpack, Vite) अनइस्तेमाल कोड को हटा सकते हैं, जिससे फाइल का साइज़ छोटा होता है।
\n

Default Export (डिफ़ॉल्ट एक्सपोर्ट) — सुविधा और संक्षिप्तता

Default export का मतलब है: "इस फाइल में एक मुख्य चीज़ है, और मैं चाहता हूँ कि इसे आसानी से इम्पोर्ट किया जा सके।" यह ऐसा है जैसे आप अपना बिज़नेस कार्ड दें, जिस पर सब कुछ मुख्य हो।

हर मॉड्यूल में सिर्फ एक default export हो सकता है। सिंटैक्स:

Default Export का उदाहरण

// logger.ts\nconst log = (message: string): void => {\n  console.log(`[LOG]: ${message}`);\n};\n\nexport default log;

या सीधे डिक्लेयर कर सकते हैं:

export default function log(message: string): void {\n  console.log(`[LOG]: ${message}`);\n}

इम्पोर्ट इस तरह दिखता है (बिना कर्ली ब्रेसेस के):

// main.ts\nimport myLog from '