टाइपस्क्रिप्ट जेनेरिक्स के साथ एरो फंक्शन: उदाहरण सहित पूर्ण गाइड

कम कोड, अधिक लाभ: टाइपस्क्रिप्ट में एरो फंक्शन और जेनेरिक्स को समझना

क्या आपने कभी टाइपस्क्रिप्ट में कोई छोटी उपयोगिता लिखी है जो संख्याओं, स्ट्रिंग्स और ऐरे के साथ काम करती हो? और तुरंत समस्या का सामना किया: डेटा प्रकार को लचीला कैसे बनाया जाए, लेकिन टाइपस्क्रिप्ट त्रुटि न दे? इसका उत्तर है जेनेरिक्स (generics, या सामान्यीकृत प्रकार)। और यदि आप संक्षिप्त सिंटैक्स पसंद करते हैं, तो आप शायद एरो फंक्शन का उपयोग करते हैं।

लेकिन एक समस्या है: Stack Overflow पर प्रश्न «What is the syntax for Typescript arrow functions with generics?» ने हजारों बार देखा गया। पता चला है, अनुभवी डेवलपर्स भी कभी-कभी इस सरल संयोजन में भ्रमित हो जाते हैं। इस लेख में, हम समझेंगे कि टाइपस्क्रिप्ट एरो फंक्शन को जेनेरिक्स के साथ सही तरीके से कैसे लिखें, सामान्य गलतियों पर विचार करेंगे, और दिखाएंगे कि आप अपने कोड को कैसे स्वच्छ और सुरक्षित बना सकते हैं।

तैयार हैं? चलिए शुरू करते हैं!

एरो फंक्शन में जेनेरिक्स क्या हैं?

शुरुआत के लिए — एक संक्षिप्त परिचय। जेनेरिक्स आपको ऐसे घटक (फंक्शन, क्लास, इंटरफ़ेस) बनाने की अनुमति देते हैं जो विभिन्न प्रकारों के साथ काम करते हैं, न कि केवल एक विशिष्ट प्रकार के साथ। संख्याओं और स्ट्रिंग्स के लिए अलग-अलग फंक्शन लिखने के बजाय, आप एक ही फंक्शन जेनेरिक के साथ लिखते हैं।

एरो फंक्शन (arrow functions) जावास्क्रिप्ट और टाइपस्क्रिप्ट में फंक्शन का एक संक्षिप्त सिंटैक्स है। जब आप उन्हें जेनेरिक्स के साथ जोड़ते हैं, तो आपको पुन: प्रयोज्य उपयोगिताओं को बनाने के लिए एक शक्तिशाली उपकरण मिलता है।

// जेनेरिक के साथ सामान्य फंक्शन\nfunction identity<T>(arg: T): T {\n    return arg;\n}\n\n// जेनेरिक के साथ एरो फंक्शन — यह कैसा दिखता है?\nconst arrowIdentity = <T>(arg: T): T => arg;

सरल है, है ना? हाँ, लेकिन कुछ बारीकियाँ हैं जिन्हें हम नीचे समझेंगे।

मूल सिंटैक्स: टाइपस्क्रिप्ट एरो फंक्शन को जेनेरिक्स के साथ सही ढंग से कैसे घोषित करें

सबसे सरल और सामान्य तरीका है आर्गुमेंट्स के गोल कोष्ठक से पहले टाइप-पैरामीटर (जेनेरिक) निर्दिष्ट करना:

const firstElement = <T>(arr: T[]): T | undefined => {\n    return arr[0];\n};\n\n// उपयोग\nconst num = firstElement([1, 2, 3]); // type: number | undefined\nconst str = firstElement(['a', 'b']); // type: string | undefined

यहाँ <T> जेनेरिक की घोषणा है। टाइपस्क्रिप्ट स्वचालित रूप से पारित आर्गुमेंट के आधार पर T का प्रकार निकालेगा। यदि आप स्पष्ट रूप से प्रकार निर्दिष्ट करना चाहते हैं, तो यह भी काम करता है:

const num = firstElement<number>([1, 2, 3]); // स्पष्ट रूप से प्रकार निर्दिष्ट करना

महत्वपूर्ण: JSX (React) में, यह सिंटैक्स मार्कअप के साथ विरोध कर सकता है। ऐसे मामलों के लिए वैकल्पिक तरीके हैं (नीचे देखें)।

एक एरो फंक्शन में कई जेनेरिक्स

आप कई टाइप-पैरामीटर का उपयोग कर सकते हैं:

const pair = <T, U>(first: T, second: U): [T, U] => {\n    return [first, second];\n};\n\nconst result = pair(42, 'hello'); // type: [number, string]

यह विशेष रूप से map, reduce जैसी उपयोगिताओं या रैपर बनाते समय उपयोगी है।

JSX (React) के साथ समस्याएँ और उनका समाधान

यदि आप टाइपस्क्रिप्ट के साथ React में लिखते हैं, तो आप देखेंगे कि <T>(arg) सिंटैक्स कंपाइलर द्वारा JSX टैग के रूप में व्याख्या किया जा सकता है। यह एक क्लासिक समस्या है, जिसके कारण Stack Overflow पर प्रश्न इतना लोकप्रिय हुआ।

दो मुख्य समाधान हैं:

1. extends का उपयोग करें (भले ही आवश्यक न हो)

extends unknown या extends Record<string, never> जोड़ें:

const myFunction = <T extends unknown>(arg: T): T => {\n    return arg;\n};

यह स्पष्ट रूप से टाइपस्क्रिप्ट को बताता है कि <T> एक जेनेरिक है, JSX नहीं।

2. अल्पविराम के साथ सिंटैक्स का उपयोग करें

कुछ मामलों में, जेनेरिक के बाद अल्पविराम जोड़ने से मदद मिलती है:

const myFunction = <T,>(arg: T):