TypeScript में कॉलबैक का टाइपिंग: हैंडलर फ़ंक्शन के लिए टाइप कैसे सेट करें

कॉलबैक के लिए any का उपयोग करना कैसे बंद करें और जीना शुरू करें: TypeScript में हैंडलर फ़ंक्शन के टाइपिंग के लिए पूर्ण गाइड

क्या आपने कभी मेथड पैरामीटर में callback: any जैसा कुछ लिखा है? यदि हाँ — क्लब में आपका स्वागत है। यदि नहीं — आप या तो प्रतिभाशाली हैं, या अभी TypeScript में अपनी यात्रा शुरू कर रहे हैं। मज़ाक है। लेकिन हर मज़ाक में कुछ सच्चाई होती है: Stack Overflow के आंकड़ों के अनुसार, प्रश्न "How to define type for a function callback (as any function type, not universal any)" हजारों बार देखा जाता है। और यह आकस्मिक नहीं है।

समस्या यह है कि any एक ब्लैक होल की तरह है: यह आपके कोड की सभी टाइप सुरक्षा को चूस लेता है। आप ऑटो-कम्प्लीशन, आर्गुमेंट की जाँच और कम्पाइल समय पर बग पकड़ने की क्षमता खो देते हैं। लेकिन सबसे बुरी बात — कॉलबैक के टाइप के रूप में any TypeScript के विचार को ही मार देता है। आइए समझते हैं कि मेथड पैरामीटर में callback फ़ंक्शन को सही तरीके से कैसे टाइप किया जाए, ताकि कोड सुरक्षित और सुरुचिपूर्ण दोनों हो।

Function any से बेहतर क्यों नहीं है?

शुरुआती का पहला आवेग बिल्ट-इन टाइप Function का उपयोग करना है। जैसे, यह "कोई भी फ़ंक्शन" टाइप है, तो यह काम करेगा। लेकिन नहीं। Function any जैसा ही एक "कचरा" टाइप है। यह सिग्नेचर के बारे में कोई जानकारी नहीं देता: फ़ंक्शन कितने पैरामीटर लेता है, क्या लौटाता है, आर्गुमेंट के टाइप क्या हैं। आप बस कम्पाइलर से कहते हैं: "मुझ पर भरोसा करो, मुझे पता है मैं क्या कर रहा हूँ"। स्पॉयलर: आमतौर पर आपको नहीं पता होता।

// बुरा: कोई टाइप जाँच नहीं\nfunction processData(callback: Function) {\n    callback(42, "hello"); // गलती? कौन जानता है\n}

इस दृष्टिकोण के साथ, आप स्टैटिक टाइपिंग के सभी लाभ खो देते हैं। चलिए इसे ठीक करते हैं।

चरण 1. कॉलबैक का बुनियादी टाइपिंग: सरल और स्पष्ट

सबसे सरल और सही तरीका है फ़ंक्शन के टाइप को सीधे पैरामीटर में घोषित करना। इसके लिए एरो सिंटैक्स (पैरामीटर) => लौटाया_गया_टाइप का उपयोग किया जाता है। यही TypeScript में function type है।

// अच्छा: स्पष्ट रूप से सिग्नेचर सेट करें\nfunction fetchData(url: string, onSuccess: (data: string) => void): void {\n    // ... कुछ लॉजिक\n    const result = "सर्वर से डेटा";\n    onSuccess(result);\n}\n\n// उपयोग — ऑटो-कम्प्लीशन और जाँच के साथ\nfetchData("/api/users", (data) => {\n    console.log(data.toUpperCase()); // data — string, सब ठीक है\n});

लौटाए गए टाइप में void पर ध्यान दें। इसका मतलब है कि हम कॉलबैक से कोई विशिष्ट मान की उम्मीद नहीं करते हैं। यदि कॉलबैक कुछ लौटाता है — इसे अनदेखा किया जाएगा। यदि आप परिणाम की उम्मीद करते हैं — विशिष्ट टाइप का उपयोग करें।

चरण 2. कई पैरामीटर वाला कॉलबैक

अक्सर कॉलबैक एक से अधिक आर्गुमेंट लेते हैं। उदाहरण के लिए, एरर हैंडलर या डेटा के साथ इवेंट। यहाँ भी उतना ही सरल है — सभी पैरामीटर को कॉमा से अलग करके सूचीबद्ध करें।

// एरर और रिजल्ट वाले कॉलबैक के लिए टाइप\nfunction loadUser(\n    userId: number,\n    callback: (error: Error | null, user: { name: string; age: number } | null) => void\n): void {\n    // ... लोडिंग लॉजिक\n    const user = { name: "अन्ना", age: 30 };\n    callback(null, user);\n}\n\n// उपयोग\nloadUser(42, (err, user) => {\n    if (err) {\n        console.error("गलती:", err.message);\n        return;\n    }\n    if (user) {\n        console.log(`नमस्ते, ${user.name}!`);\n    }\n});

देखिए, TypeScript स्वचालित रूप से err और user के टाइप कैसे सुझाता है? यही callback फ़ंक्शन का टाइपिंग क्रियान्वित है। बिना any, बिना जादू — केवल सख्त जाँच।

चरण 3. कॉलबैक के लिए पुन: प्रयोज्य टाइप बनाना

यदि एक ही कॉलबैक टाइप का उपयोग कई स्थानों पर किया जाता है, तो इसे हर बार डुप्लिकेट करने की आवश्यकता नहीं है। इसे एक अलग type alias या interface में निकालें। इससे पठनीयता में सुधार होता है और रखरखाव सरल होता है।

// घोषणा