TypeScript input onChange: 2025 में event.target.value को सही तरीके से कैसे पकड़ें

हर React डेवलपर का साइलेंट हॉरर: event.target.value और TypeScript

क्या आपने कभी एक साधारण इनपुट के लिए onChange हैंडलर लिखा है, और TypeScript अचानक लाल चिल्लाने लगा? परिचित लगता है: "Property 'value' does not exist on type 'EventTarget'"। Stack Overflow पर इस प्रश्न ने हजारों व्यूज़ जुटाए हैं, और यह सही भी है। ऐसा लगता है कि इससे आसान क्या हो सकता है — इनपुट फील्ड से मान लेना? लेकिन शैतान, हमेशा की तरह, विवरण में है।

2025 में, TypeScript इकोसिस्टम और भी सख्त हो गया है। कंपाइलर के नए संस्करण टाइप्स का बेहतर विश्लेषण करते हैं, और पुराने "हैक्स" काम करना बंद कर चुके हैं। यदि आप React में लिख रहे हैं या DOM के साथ काम करने के लिए केवल TypeScript का उपयोग कर रहे हैं, तो यह लेख आपकी लाइफबोट है। हम न केवल onChange को कैसे टाइप करें समझेंगे, बल्कि यह भी कि यह ऐसा क्यों काम करता है, न कि अन्यथा। चलिए शुरू करते हैं!

event.target.value दर्द क्यों है?

चलिए सीधे मुद्दे पर आते हैं। यहाँ एक विशिष्ट उदाहरण है जो त्रुटि उत्पन्न करता है:

const handleChange = (event: any) => {\n  const value = event.target.value; // काम करता है, लेकिन यह "any" बुराई है\n};

समस्या यह है कि event कुछ भी हो सकता है। TypeScript नहीं जानता कि यह कौन सा एलिमेंट है और क्या इसमें value प्रॉपर्टी है। इसके अलावा, any का उपयोग स्टैटिक टाइपिंग के सभी जादू को खत्म कर देता है। आप ऑटो-कम्प्लीशन और त्रुटियों से सुरक्षा खो देते हैं।

सही तरीका विशिष्ट टाइप्स का उपयोग करना है। लेकिन कौन से? आइए समझते हैं।

2025 में onChange टाइपिंग की सर्वोत्तम प्रथाएँ

1. React: ChangeEvent का उपयोग करें

यदि आप React के साथ काम कर रहे हैं, तो नेटिव Event को भूल जाइए। React अपने सिंथेटिक इवेंट्स — SyntheticEvent का उपयोग करता है। इनपुट, टेक्स्टएरिया और सेलेक्ट के लिए ChangeEvent एकदम सही है।

import React, { ChangeEvent } from 'react';\n\nconst MyInput = () => {\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.value;\n    console.log(value); // value — स्ट्रिंग, TypeScript खुश है\n  };\n\n  return <input type="text" onChange={handleChange} />;\n};

यह क्यों काम करता है? ChangeEvent<HTMLInputElement> एक जेनेरिक है जो ठीक से जानता है कि event.target एक HTMLInputElement है। और इसके पास string प्रकार की value प्रॉपर्टी है। सब कुछ तार्किक और टाइप-सुरक्षित है।

2. textarea और select के लिए

समान दृष्टिकोण फॉर्म के अन्य एलिमेंट्स के लिए काम करता है। बस जेनेरिक बदलें:

\n
• ChangeEvent<HTMLTextAreaElement> — <textarea> के लिए
\n
• ChangeEvent<HTMLSelectElement> — <select> के लिए
\n
• ChangeEvent<HTMLInputElement> — <input> के लिए
\n

const handleTextareaChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n  const text = event.target.value; // string\n};\n\nconst handleSelectChange = (event: ChangeEvent<HTMLSelectElement>) => {\n  const selectedValue = event.target.value; // string\n};

3. शुद्ध TypeScript (React के बिना): Event + type assertion

यदि आप React का उपयोग नहीं कर रहे हैं, बल्कि सीधे DOM के साथ काम कर रहे हैं, तो यह थोड़ा अलग है। नेटिव Event value प्रॉपर्टी के बारे में नहीं जानता। आपको event.target को सही टाइप में बदलना होगा।

const inputElement = document.getElementById('my-input') as HTMLInputElement;\n\ninputElement.addEventListener('change', (event: Event) => {\n  const target = event.target as HTMLInputElement;\n  const value = target.value;\n  console.log(value);\n});

महत्वपूर्ण: टाइप कास्टिंग (as HTMLInputElement) का उपयोग केवल तभी करें जब आप एलिमेंट के टाइप के बारे में 100% आश्वस्त हों। अन्यथा, आप रनटाइम में त्रुटि प्राप्त करने का जोखिम उठाते हैं।

4. यूनिवर्सल