TypeScript में ऑब्जेक्ट्स के ऐरे: उदाहरणों के साथ पूर्ण गाइड

TypeScript में ऑब्जेक्ट्स के ऐरे: उन लोगों के लिए चरण-दर-चरण ट्यूटोरियल जो त्रुटियों से थक गए हैं

क्या आपने कभी TypeScript में लिखा है और अचानक IDE से लाल रेखांकन मिला है जब आपने ऐरे में कोई ऑब्जेक्ट जोड़ने का प्रयास किया? परिचित लगता है, है ना? प्रश्न "How can I define an array of objects?" Stack Overflow पर सबसे लोकप्रिय प्रश्नों में से एक है। और यह सही भी है: ऑब्जेक्ट्स के ऐरे की सही टाइपिंग के बिना, आपका कोड बग और सिरदर्द का स्रोत बन जाता है।

इस ट्यूटोरियल में, हम TypeScript में ऑब्जेक्ट्स के ऐरे को परिभाषित करने के सभी तरीकों पर चर्चा करेंगे - सरल से लेकर उन्नत तक। आप सीखेंगे कि सामान्य गलतियों से कैसे बचें, इंटरफ़ेस का उपयोग कैसे करें और अपने कोड को न केवल काम करने योग्य बल्कि सुंदर भी कैसे बनाएं। चलिए शुरू करते हैं!

क्यों सिर्फ [] काम नहीं करता?

मान लीजिए, आप लिखते हैं:

let users = [];

TypeScript इसे never[] के रूप में देखता है - एक ऐरे जिसमें कभी भी कोई तत्व नहीं होना चाहिए। इसमें एक ऑब्जेक्ट जोड़ने का प्रयास करें:

users.push({ name: 'अन्ना', age: 25 }); // त्रुटि!

IDE चिल्लाएगा: "Argument of type '{ name: string; age: number; }' is not assignable to parameter of type 'never'." TypeScript नहीं जानता कि आप ऐरे में क्या संग्रहीत करने जा रहे हैं, इसलिए यह किसी भी जोड़ को ब्लॉक कर देता है।

समाधान - ऐरे के प्रकार को स्पष्ट रूप से निर्दिष्ट करना। आइए सभी विकल्पों पर चर्चा करें।

तरीका 1: मूल प्रकार एनोटेशन - वर्गाकार कोष्ठक

सबसे सरल और सहज तरीका प्रकार[] सिंटैक्स का उपयोग करना है:

let users: { name: string; age: number }[] = [];\n\nusers.push({ name: 'अन्ना', age: 25 }); // ✅ काम करता है\nusers.push({ name: 'इवान', age: 30 }); // ✅ काम करता है\n

यहाँ हम TypeScript से कह रहे हैं: "अरे, यह ऑब्जेक्ट्स का एक ऐरे है, जिनमें से प्रत्येक में name (स्ट्रिंग) और age (संख्या) गुण हैं"। अब IDE संतुष्ट है, ऑटो-कम्प्लीशन काम करता है, प्रकार की त्रुटियाँ कंपाइलेशन के समय पकड़ी जाती हैं।

नुकसान: यदि ऑब्जेक्ट की संरचना जटिल है, तो सीधे एनोटेशन में विवरण बोझिल हो जाता है। ऐसे मामलों के लिए इंटरफ़ेस बनाए गए हैं।

तरीका 2: इंटरफ़ेस - आपके सबसे अच्छे दोस्त

इंटरफ़ेस आपको ऑब्जेक्ट के विवरण को एक अलग इकाई में निकालने और इसे पुन: उपयोग करने की अनुमति देते हैं। यह कोड को साफ और अधिक समझने योग्य बनाता है:

interface User {\n  id: number;\n  name: string;\n  age: number;\n  email?: string; // वैकल्पिक गुण\n}\n\nlet users: User[] = [];\n\nusers.push({ id: 1, name: 'अन्ना', age: 25 });\nusers.push({ id: 2, name: 'इवान', age: 30, email: 'ivan@example.com' }); // ✅\n

अब यदि आप बिना id फ़ील्ड या गलत प्रकार के साथ कोई ऑब्जेक्ट जोड़ने का प्रयास करते हैं, तो TypeScript एक त्रुटि देगा। इंटरफ़ेस विशेष रूप से तब उपयोगी होते हैं जब एक ही प्रकार के ऑब्जेक्ट का उपयोग कई स्थानों पर किया जाता है।

और type के बारे में क्या?

interface के बजाय type का उपयोग किया जा सकता है:

type User = {\n  id: number;\n  name: string;\n  age: number;\n};\n\nlet users: User[] = [];

interface और type के बीच अंतर एक अलग लेख का विषय है। ऑब्जेक्ट्स के ऐरे के लिए दोनों विकल्पों का उपयोग किया जा सकता है, लेकिन interface का उपयोग अक्सर ऑब्जेक्ट के आकार का वर्णन करने के लिए किया जाता है।

तरीका 3: जेनेरिक सिंटैक्स Array<Type>

एक वैकल्पिक तरीका जेनेरिक का उपयोग करना है:

let users: Array<{ name: string; age: number }> = [];\n\n// या इंटरफ़ेस के साथ:\nlet users: Array<User> = [];\n

दोनों सिंटैक्स (Type[] और Array<Type>) समान रूप से काम करते हैं। चुनाव स्वाद और संदर्भ का मामला है। व्यक्तिगत रूप से, मैं सरल प्रकारों के लिए Type[] और जटिल जेनेरिक निर्माणों के लिए Array<Type> पसंद करता हूं। लेकिन मुख्य बात प्रोजेक्ट में सुसंगत रहना है।

तरीका 4: प्रारंभिक ऑब्जेक्ट्स के साथ ऐरे बनाना

अक्सर ऐरे को केवल घोषित करने की नहीं, बल्कि तुरंत डेटा से भरने की आवश्यकता होती है। TypeScr