प्रॉपर्टी 'value' टाइप 'EventTarget' पर मौजूद नहीं है: समाधान 2025

«Property 'value' does not exist on type 'EventTarget'» — TypeScript में इवेंट को टाइप करने से डरना कैसे बंद करें और शुरू करें

क्या आपने कभी TypeScript में कोई इवेंट हैंडलर लिखा है, event.target.value प्राप्त करने का प्रयास किया है — और तुरंत लाल रेखांकन और संदेश मिला: «Property 'value' does not exist on type 'EventTarget'»? यदि हाँ — तो आप अकेले नहीं हैं। Stack Overflow पर इस प्रश्न ने हजारों व्यूज एकत्र किए हैं, और यह 2025 में भी नौसिखियों और अनुभवी डेवलपर्स को परेशान करता रहता है।

समस्या यह नहीं है कि TypeScript «बुरा» या «टूटा हुआ» है। बिल्कुल विपरीत: कंपाइलर आपको मूर्खतापूर्ण गलतियों से बचाता है जो रनटाइम में हो सकती थीं। आइए समझते हैं कि यह त्रुटि क्यों होती है और इसे सही तरीके से कैसे ठीक किया जाए।

TypeScript event.target.value पर क्यों आपत्ति करता है?

संक्षिप्त उत्तर: event.target का प्रकार EventTarget | null है। और EventTarget में कोई value प्रॉपर्टी नहीं है। इसमें केवल तीन विधियाँ हैं: addEventListener, removeEventListener और dispatchEvent।

जब आप लिखते हैं:

const handleChange = (event: React.ChangeEvent) => {\n  const value = event.target.value; // ❌ त्रुटि!\n};\n

TypeScript देखता है: «अरे, मुझे नहीं पता कि किस विशिष्ट HTML-एलिमेंट ने यह इवेंट ट्रिगर किया। हो सकता है कि यह <div> हो, जिसमें value नहीं है, या <input> हो — मुझे यकीन नहीं है। इसलिए मैं ऐसे कोड को कंपाइल करने से मना करता हूँ»।

यह एक विशेषता है, बग नहीं। TypeScript आपको स्पष्ट रूप से बताने के लिए मजबूर करता है कि आप किस एलिमेंट के साथ काम कर रहे हैं।

शीर्ष 3 समाधान विधियाँ (2025 के लिए प्रासंगिक)

कई दृष्टिकोण हैं। हम सबसे लोकप्रिय और सुरक्षित पर विचार करेंगे।

1. as HTMLInputElement के माध्यम से कास्ट (तेज़, लेकिन सावधानी से)

सबसे सामान्य तरीका — event.target को आवश्यक प्रकार में बदलना:

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n  const value = (event.target as HTMLInputElement).value;\n  console.log(value);\n};\n

लाभ: सरल, स्पष्ट, काम करता है।

नुकसान: यदि आप गलती करते हैं और वास्तव में इवेंट <textarea> या <select> से आया है, तो रनटाइम में आपको undefined मिलेगा। कंपाइलर आपको चेतावनी नहीं देगा।

इस विधि का उपयोग तब करना बेहतर है जब आप एलिमेंट के प्रकार के बारे में पूरी तरह से आश्वस्त हों। उदाहरण के लिए, एक फ़ील्ड वाले सरल फॉर्म में।

2. event.target के बजाय event.currentTarget का उपयोग करें

TypeScript में, currentTarget target की तुलना में अधिक सख्ती से टाइप किया गया है। यदि आप इवेंट के लिए generic-पैरामीटर निर्दिष्ट करते हैं, तो currentTarget का सही प्रकार होगा:

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n  const value = event.currentTarget.value; // ✅ बिना कास्ट के काम करता है!\n};\n

महत्वपूर्ण: currentTarget वह एलिमेंट है जिस पर हैंडलर सब्सक्राइब किया गया है। यदि आपने <input> पर सब्सक्राइब किया है, तो currentTarget हमेशा वही <input> होगा। target के विपरीत, जो एक नेस्टेड एलिमेंट हो सकता है (उदाहरण के लिए, बटन के अंदर <span>)।

लाभ: कास्ट से अधिक सुरक्षित, अतिरिक्त रूपांतरण लिखने की आवश्यकता नहीं है।

नुकसान: सभी परिदृश्यों के लिए उपयुक्त नहीं — उदाहरण के लिए, बबलिंग इवेंट के लिए currentTarget लक्ष्य एलिमेंट से मेल नहीं खा सकता है।

3. जाँच के साथ जेनेरिक फ़ंक्शन (सबसे सुरक्षित तरीका)

यदि आप अधिकतम सुरक्षा और पुन: प्रयोज्यता चाहते हैं, तो एक सहायक फ़ंक्शन लिखें जो एलिमेंट के प्रकार की जाँच करता है:

function getInputValue(event: Event): string