TypeScript में Record: प्रैक्टिकल तरीके से समझें
\n\nकल्पना करें कि आप अंग्रेजी शब्द सीखने का एक ऐप बना रहे हैं। आपको अनुवाद स्टोर करने हैं: cat → बिल्ली, dog → कुत्ता। TypeScript में इसे सही तरीके से टाइप कैसे करें? आप एक इंटरफ़ेस बना सकते हैं, लेकिन क्या होगा अगर कीज़ पहले से पता न हों? या बहुत सारी हों? ऐसे में Record काम आता है — यह सबसे उपयोगी लेकिन अक्सर अनदेखा किया जाने वाला यूटिलिटी टाइप है।
इस लेख में हम TypeScript में Record टाइप को रियल उदाहरणों के साथ समझेंगे, जिन्हें आप तुरंत अपने प्रोजेक्ट में लगा सकते हैं। कोई बोरिंग थ्योरी नहीं — सिर्फ प्रैक्टिस।
\n\nTypeScript में Record क्या है? सरल शब्दों में
\n\nRecord<K, V> एक बिल्ट-इन यूटिलिटी टाइप है जो एक ऑब्जेक्ट बनाता है, जहाँ सभी कीज़ का टाइप K और सभी वैल्यू का टाइप V होता है।
इसे एक टाइप किया हुआ डिक्शनरी या फिक्स्ड कीज़ वाला मैप समझें।
बेसिक सिंटैक्स इस तरह है:
\n\n// सामान्य ऑब्जेक्ट\nconst userRoles: Record<string, string> = {\n admin: 'एडमिन',\n user: 'यूज़र',\n guest: 'मेहमान'\n};\n\nयहाँ Record<string, string> का मतलब है: "एक ऑब्जेक्ट जहाँ कीज़ स्ट्रिंग हैं और वैल्यू भी स्ट्रिंग हैं"। सरल और स्पष्ट।
Record सामान्य इंटरफ़ेस से बेहतर क्यों है?
\n\n- \n
- कीज़ में लचीलापन: आप union-टाइप के ज़रिए कीज़ का एक खास सेट दे सकते हैं। \n
- संक्षिप्तता: हर फील्ड को मैन्युअल रूप से लिखने की ज़रूरत नहीं। \n
- सुरक्षा: TypeScript चेक करेगा कि आप केवल अनुमत कीज़ का ही उपयोग कर रहे हैं। \n
Record vs सामान्य ऑब्जेक्ट: एक उदाहरण
\n\nमान लीजिए, हमारे पास ऑर्डर के स्टेटस हैं: pending, shipped, delivered। Record के बिना, हमें तीन फील्ड वाला इंटरफ़ेस लिखना होगा:
interface OrderStatusMap {\n pending: string;\n shipped: string;\n delivered: string;\n}\n\nconst statusDescriptions: OrderStatusMap = {\n pending: 'प्रोसेस हो रहा है',\n shipped: 'भेज दिया गया',\n delivered: 'डिलीवर हो गया'\n};\n\nजबकि Record के साथ यह ज़्यादा कॉम्पैक्ट और साफ है:
\n\ntype OrderStatus = 'pending' | 'shipped' | 'delivered';\n\nconst statusDescriptions: Record<OrderStatus, string> = {\n pending: 'प्रोसेस हो रहा है',\n shipped: 'भेज दिया गया',\n delivered: 'डिलीवर हो गया'\n};\n\nफायदा: अगर आप ऑब्जेक्ट में cancelled जोड़ने की कोशिश करेंगे, तो TypeScript तुरंत एरर दिखाएगा — यह स्टेटस union-टाइप में नहीं है।
Record के टॉप-5 प्रैक्टिकल उदाहरण
\n\nआइए देखें कि Record वास्तव में कहाँ काम आता है।
\n\n1. ऐप कॉन्फ़िगरेशन
\nज्ञात कीज़ के साथ सेटिंग्स स्टोर करें, लेकिन अलग-अलग टाइप की वैल्यू:
\n\ntype ConfigKeys = 'apiUrl' | 'timeout' | 'retryCount';\ntype ConfigValue = string | number | boolean;\n\nconst appConfig: Record<ConfigKeys, ConfigValue> = {\n apiUrl: 'https://api.example.com',\n timeout: 5000,\n retryCount: 3\n};\n\n2. Enum या कॉन्स्टेंट का मैपिंग
\nअक्सर कोड और उसके मानव-पठनीय नाम को जोड़ना होता है:
\n\nenum HttpStatus {\n OK = 200,\n NotFound = 404,\n Error = 500\n}\n\nconst statusMessages: Record<HttpStatus, string> = {\n [HttpStatus.OK]: 'सब ठीक है',\n [HttpStatus.NotFound]: 'नहीं मिला',\n [HttpStatus.Error]: 'सर्वर एरर'\n};\n\n3. फॉर्म और वैलिडेशन
\nRecord फील्ड-वार वैलिडेशन एरर स्टोर करने के लिए बहुत अच्छा है:
\n\ntype FormFields = 'email' | 'password' | 'name';\ntype ValidationErrors = Record<FormFields, string | null>;\n\nconst errors: ValidationErrors = {\n email: 'गलत ईमेल',\n password: null,\n name: 'नाम ज़रूरी है'\n};\n\n4. डेटा कैश
\nआइडेंटिफ़ायर कीज़ के साथ कैश का अनुकरण:
\n\ntype UserI