TypeScript में Array<Type> बनाम Type[]: 5 घातक गलतियाँ और उनसे कैसे बचें

TypeScript में Array<Type> बनाम Type[]: सिंटैक्स की लड़ाई जिसे आपको जीतना ही होगा

यदि आपने कभी TypeScript में लिखा है, तो आपने निश्चित रूप से संख्याओं की एक सरणी घोषित करने के दो तरीके देखे होंगे:

const numbers1: number[] = [1, 2, 3];\nconst numbers2: Array<number> = [1, 2, 3];

दोनों विकल्प काम करते हैं। दोनों कंपाइल होते हैं। दोनों मान्य TypeScript हैं। तो फिर इनके आसपास इतना विवाद क्यों है? Stack Overflow पर इस प्रश्न को हज़ारों बार क्यों देखा गया? और सबसे महत्वपूर्ण बात - उन गलतियों से कैसे बचें जो आपके प्रोजेक्ट को तोड़ देंगी?

आइए इसे एक बार और हमेशा के लिए समझ लें। उबाऊ सिद्धांत के बिना। केवल वही जो वास्तव में युद्ध में काम आएगा।

संक्षिप्त परिचय: क्या है क्या

Type[] सिंटैक्स (Array Literal Syntax)

TypeScript में सरणी घोषित करने का यह सबसे सामान्य तरीका है। यह JavaScript से आया है और स्वाभाविक दिखता है:

let fruits: string[] = ['apple', 'banana', 'cherry'];\nlet matrix: number[][] = [[1, 2], [3, 4]]; // सरणियों की सरणी

संक्षिप्त, पढ़ने योग्य, सहज। 90% मामलों के लिए यह पर्याप्त है।

Array<Type> सिंटैक्स (Generic Syntax)

यह जेनेरिक रूप है जो अंतर्निहित इंटरफ़ेस Array<T> का उपयोग करता है:

let fruits: Array<string> = ['apple', 'banana', 'cherry'];\nlet matrix: Array<Array<number>> = [[1, 2], [3, 4]];

यह अधिक "अकादमिक" दिखता है, लेकिन जटिल परिदृश्यों में अधिक लचीलापन प्रदान करता है।

शीर्ष 5 गलतियाँ जो अनुभवी डेवलपर्स भी करते हैं

गलती #1: IDE के ऑटोकम्प्लीट पर आँख मूंदकर भरोसा करना

आपकी IDE दोनों विकल्प सुझा सकती है। लेकिन इसका मतलब यह नहीं है कि वे हर जगह एक-दूसरे के स्थान पर उपयोग किए जा सकते हैं। union-प्रकारों के साथ एक उदाहरण देखें:

// ऐसा कर सकते हैं\ntype Status = 'active' | 'inactive';\nconst statuses1: Status[] = ['active', 'inactive'];\n\n// लेकिन ऐसा - सिंटैक्स त्रुटि!\n// const statuses2: Array<'active' | 'inactive'> = ['active', 'inactive']; \n// ❌ त्रुटि: ';' अपेक्षित\n\n// जेनेरिक के साथ सही विकल्प:\nconst statuses3: Array<Status> = ['active', 'inactive'];

निष्कर्ष: Array<> के अंदर सीधे जटिल union-प्रकारों का उपयोग नहीं किया जा सकता। पहले उन्हें एक अलग प्रकार में निकालें।

गलती #2: readonly सरणियों में भ्रम

जब सरणी को अपरिवर्तनीय बनाने की आवश्यकता होती है, तो सिंटैक्स अलग-अलग व्यवहार करते हैं:

// ✅ Type[] के साथ सही\nconst readonlyFruits: readonly string[] = ['apple', 'banana'];\n// readonlyFruits.push('orange'); // ❌ त्रुटि: readonly\n\n// ❌ यह काम नहीं करेगा:\n// const wrong: readonly Array<string> = ['apple']; \n// त्रुटि: 'readonly' modifier only array types पर ही दिखाई दे सकता है\n\n// ✅ Array<> के साथ सही — ReadonlyArray का उपयोग करें:\nconst correct: ReadonlyArray<string> = ['apple', 'banana'];

निष्कर्ष: readonly सरणियों के लिए readonly Type[] या ReadonlyArray<Type> का उपयोग करें। readonly को Array<> के साथ मिलाना संभव नहीं है।

गलती #3: बहु-स्तरीय सरणियों में समस्याएँ

जब सरणी में अन्य सरणियाँ होती हैं, तो Array<> सिंटैक्स बोझिल हो जाता है:

// पढ़ने योग्य और समझने योग्य\nconst grid1: number[][] = [[1, 2], [3, 4]];\n\n// पढ़ने में पहले से कठिन\nconst grid2: Array<Array<number>> = [[1, 2], [3, 4]];\n\n// और यदि तीन स्तर हों? बुरा सपना:\nconst cube: Array<Array<Array<number>>> = [[[1]]]; // 🤯\n\n// Type[] के साथ यह आसान है:\nconst cube2: number[][][] = [[[1]]];

निष्कर्ष: 2 से अधिक नेस्टिंग वाली सरणियों के लिए Type[][] का उपयोग करें। आपके सहकर्मी आपको धन्यवाद देंगे।

गलती #4: उपयोग के संदर्भ को अनदेखा करना

कुछ फ्रेमवर्क (Angular, React) और लाइब्रेरीज़ में एक निश्चित शैली अपनाई जाती है। परंपरा का उल्लंघन भ्रम पैदा कर सकता है:

// Angular अक्सर