TypeScript में ऐरे एलिमेंट्स को हटाना: शुरुआती लोगों के लिए 5 तरीके

TypeScript में ऐरे एलिमेंट्स को हटाना: शुरुआत से विशेषज्ञ तक

नमस्ते, भविष्य के TypeScript-गुरु! 👋 यदि आपने कभी TypeScript (या JavaScript) में कोड लिखा है और सोचा है: "How do I remove an array item in TypeScript?" — तो आप अकेले नहीं हैं। यह प्रश्न Stack Overflow पर हजारों बार देखा जा चुका है, और यह कोई संयोग नहीं है। ऐरे से एलिमेंट हटाना उन बुनियादी कार्यों में से एक है, जो सरल होना चाहिए, लेकिन वास्तव में इसमें कई छिपी हुई चुनौतियाँ हैं।

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

यह क्यों महत्वपूर्ण है? (और इसमें TypeScript कहाँ आता है?)

ऐरे किसी भी एप्लिकेशन की नींव हैं। उपयोगकर्ताओं की सूची, उत्पादों की टोकरी, संदेशों का इतिहास — ये सब ऐरे हैं। और उनकी सामग्री को कुशलतापूर्वक प्रबंधित करना एक महत्वपूर्ण कौशल है। TypeScript इसमें एक और परत जोड़ता है: टाइपिंग। यदि आप किसी एलिमेंट को गलत तरीके से हटाते हैं, तो कंपाइलर त्रुटि नहीं दे सकता है, लेकिन रनटाइम पर आपका एप्लिकेशन क्रैश हो सकता है। इसलिए हम उदाहरणों को सख्ती से TypeScript में, स्पष्ट प्रकारों के साथ देखेंगे।

आइए एक "टेस्ट पॉलीगॉन" बनाएं — एक ऐरे जिसके साथ हम काम करेंगे:

// हमारा शैक्षिक ऐरे\nconst fruits: string[] = ['🍎 Apple', '🍌 Banana', '🍊 Orange', '🍇 Grape', '🍉 Watermelon'];\n\n// ऑब्जेक्ट का टाइप किया गया ऐरे (अधिक यथार्थवादी उदाहरण)\ninterface User {\n  id: number;\n  name: string;\n  role: 'admin' | 'user';\n}\n\nconst users: User[] = [\n  { id: 1, name: 'Alice', role: 'admin' },\n  { id: 2, name: 'Bob', role: 'user' },\n  { id: 3, name: 'Charlie', role: 'user' },\n];

अब प्रत्येक हटाने के तरीके पर चर्चा करेंगे। हम विभिन्न कार्यों के संदर्भ में प्रश्न का उत्तर देंगे: "How do I remove an array item in TypeScript?"

तरीका #1: splice() — इंडेक्स के अनुसार "सर्जिकल" हटाना

विधि splice() ऐरे के साथ काम करने के लिए एक स्विस आर्मी चाकू है। यह एलिमेंट्स को हटा, जोड़ और बदल सकता है। लेकिन आज हम केवल हटाने में रुचि रखते हैं।

सिंटैक्स: array.splice(startIndex, deleteCount)

\n
• startIndex — वह इंडेक्स जहाँ से हटाना शुरू करना है।
\n
• deleteCount — कितने एलिमेंट हटाने हैं।
\n

महत्वपूर्ण: splice() मूल ऐरे को बदलता है (इसे म्यूटेट करता है) और हटाए गए एलिमेंट्स का ऐरे लौटाता है।

उदाहरण: दूसरा एलिमेंट हटाना (Banana)

const myFruits: string[] = [...fruits]; // मूल को खराब न करने के लिए कॉपी बनाएं\n\n// इंडेक्स 1 से शुरू करके 1 एलिमेंट हटाएं (दूसरा एलिमेंट)\nconst removedFruit: string[] = myFruits.splice(1, 1);\n\nconsole.log(myFruits);      // ['🍎 Apple', '🍊 Orange', '🍇 Grape', '🍉 Watermelon']\nconsole.log(removedFruit); // ['🍌 Banana']

कब उपयोग करें: जब आप उस एलिमेंट का सटीक इंडेक्स जानते हैं जिसे हटाना है। उदाहरण के लिए, किसी उत्पाद को उसके क्रमांक के अनुसार कार्ट से हटाना।

TypeScript की बारीकी: लौटाए गए मान का प्रकार T[] (मूल के समान प्रकार का ऐरे) है। यदि आप readonly ऐरे से एलिमेंट हटाने का प्रयास करते हैं, तो TypeScript त्रुटि देगा, क्योंकि splice ऐरे को म्यूटेट करता है।

तरीका #2: filter() — शर्त के अनुसार सुरक्षित हटाना (बिना म्यूटेशन के)

यह मेरा पसंदीदा तरीका है। filter() एक "फंक्शनल" दृष्टिकोण है। यह मूल ऐरे को नहीं बदलता है, बल्कि एक नया ऐरे बनाता है जिसमें केवल वे एलिमेंट होते हैं जो जाँच में पास हुए हैं।