क्यों Event.target टाइपस्क्रिप्ट में तत्व नहीं है?

Question

मैं बस अपने कीबोर्डएवेंट के साथ ऐसा करना चाहता हूं

var tag = evt.target.tagName.toLowerCase();

जबकि Event.target EventTarget का है, यह तत्व से विरासत में नहीं मिलता है। तो मुझे इसे इस तरह डालना होगा:

var tag = (<Element>evt.target).tagName.toLowerCase();

यह शायद कुछ ब्राउज़रों के मानकों का पालन नहीं करने के कारण है, है ना? टाइपस्क्रिप्ट में सही ब्राउज़र अज्ञेय कार्यान्वयन क्या है?

PS: मैं KeyboardEvent को पकड़ने के लिए jQuery का उपयोग कर रहा हूं।

Comments

थोड़ा क्लीनर वाक्य रचनाvar element = ev.target as HTMLElement

— एड्रियन मोइसा

Answer 1

Elementक्योंकि सभी ईवेंट लक्ष्य तत्व नहीं हैं, यह इनहेरिट नहीं करता है ।

MDN से :

तत्व, दस्तावेज़, और विंडो सबसे आम घटना लक्ष्य हैं, लेकिन अन्य ऑब्जेक्ट्स इवेंट लक्ष्य भी हो सकते हैं, उदाहरण के लिए XMLHttpRequest, AudioNode, AudioContext, और अन्य।

यहां तक ​​कि KeyboardEventआप जो उपयोग करने का प्रयास कर रहे हैं, वह DOM तत्व पर या विंडो ऑब्जेक्ट (और सैद्धांतिक रूप से अन्य चीजों पर) हो सकता है, इसलिए वहीं इसे evt.targetएक के रूप में परिभाषित करने के लिए कोई मतलब नहीं होगा Element।

यदि यह एक DOM तत्व पर एक घटना है, तो मैं कहूंगा कि आप सुरक्षित रूप से मान सकते हैं evt.target। एक है Element। मुझे नहीं लगता कि यह क्रॉस-ब्राउज़र व्यवहार का मामला है। मर्ली कि EventTargetतुलना में अधिक अमूर्त इंटरफ़ेस है Element।

आगे पढ़े: https://typescript.codeplex.com/discussions/432211

Comments

उस स्थिति में KeyboardEvent और MouseEvent के पास EventTarget का खुद का समतुल्य होना चाहिए जिसमें हमेशा संबंधित तत्व शामिल रहेंगे। डोम इतना

— डोजि है

मैं DOM और टाइपस्क्रिप्ट पर विशेषज्ञ नहीं हूं, लेकिन मैं कहूंगा कि EventTarget के डिजाइन में बहुत अधिक अस्पष्टता है और इसका टाइपस्क्रिप्ट के साथ कोई लेना-देना नहीं है।

— daniel.sedlacek

@ daniel.sedlacek दूसरी ओर, KeyboardEventएस डोम तत्वों और विंडो ऑब्जेक्ट (और सैद्धांतिक रूप से अन्य चीजों) दोनों पर हो सकता है, इसलिए सही है कि वहाँ KeyboardEvent.targetएक प्रकार देना असंभव है जो किसी भी अधिक विशिष्ट है EventTarget, जब तक आपको नहीं लगता कि KeyboardEventयह भी होना चाहिए सामान्य प्रकार KeyboardEvent<T extends EventTarget>और KeyboardEvent<Element>अपने पूरे कोड में रखने के लिए मजबूर होना चाहते हैं । उस बिंदु पर, आप केवल स्पष्ट कलाकारों को कर रहे हैं, भले ही यह दर्दनाक हो।

— JLRishe

भविष्य में किसी और के लिए उपयोगी होने वाले मामलों में, मुझे टैग की valueसंपत्ति तक पहुंचने के लिए एक विशिष्ट तत्व प्रकार के रूप में डालना आवश्यक है <select>। जैसेlet target = <HTMLSelectElement> evt.target;

— १

@munsellj (दुर्भाग्य से) जो टाइप किए गए वातावरण में अस्पष्टताओं को संभालने का सही तरीका है।

— पिलाउ

Answer 2

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

  handleChange(event: { target: HTMLInputElement; }) {
    this.setState({ value: event.target.value });
  }

इस स्थिति में, हैंडलचेंज को लक्ष्य फ़ील्ड के साथ एक ऑब्जेक्ट प्राप्त होगा जो कि HTMLInputElement प्रकार का है।

बाद में अपने कोड में मैं उपयोग कर सकता हूं

<input type='text' value={this.state.value} onChange={this.handleChange} />

एक क्लीनर दृष्टिकोण एक अलग फ़ाइल में इंटरफ़ेस डालने के लिए होगा।

interface HandleNameChangeInterface {
  target: HTMLInputElement;
}

फिर बाद में निम्न फ़ंक्शन परिभाषा का उपयोग करें:

  handleChange(event: HandleNameChangeInterface) {
    this.setState({ value: event.target.value });
  }

मेरे usecase में, यह स्पष्ट रूप से परिभाषित है कि एकमात्र कॉलगर्ल को संभालना एक HTML तत्व प्रकार का इनपुट टेक्स्ट है।

Comments

यह मेरे लिए पूरी तरह से काम करता है - मैं सभी प्रकार की नग्नता की कोशिश कर रहा था, इवेंटटार्ग आदि का विस्तार कर रहा था, लेकिन यह सबसे साफ समाधान है +1

— किट्सन

बस इसे जोड़ने के लिए, यदि आपको घटना की परिभाषा को बढ़ाने की आवश्यकता है, तो आप कुछ इस तरह कर सकते हैं:handleKeyUp = (event: React.KeyboardEvent<HTMLInputElement> & { target: HTMLInputElement }) => {...}

— किट्सन

Answer 3

JLRishe का उत्तर सही है, इसलिए मैं बस अपने ईवेंट हैंडलर में इसका उपयोग करता हूं:

if (event.target instanceof Element) { /*...*/ }

Answer 4

टाइपस्क्रिप्ट 3.2.4

संपत्ति प्राप्त करने के लिए आपको उपयुक्त डेटा प्रकार के लिए लक्ष्य निर्धारित करना चाहिए:

e => console.log((e.target as Element).id)

Comments

क्या यह <HTMLInputElement>event.target;वाक्य रचना के समान है ?

— कोनराड विल्टर्स्टन

@KonradViltersten, वे एक ही काम करते हैं। asक्योंकि यह JSX के साथ विरोध हुआ वाक्य रचना शुरू की गई थी। यह asस्थिरता के लिए उपयोग करने के लिए अनुशंसित है । basarat.gitbooks.io/typescript/docs/types/type-assertion.html

— एडम

आह मैंने देखा। यह टीम के बैकएंड अनुभव के आधार पर अधिक C # 'ish दिखाई दे रहा है जो कई मामलों में एक फायदा है। जब तक यह उन झूठे दोस्तों में से एक नहीं है जहां वाक्य रचना कुछ जैसा दिखता है, लेकिन तकनीकी रूप से पूरी तरह से कुछ अलग है। (मैं Angular और C # के बीच var और const सोच रहा हूं , मेरा एक दुखद अनुभव है, hehe)।

— कोनराड विल्टरनस्ट

Answer 5

क्या आप अपना स्वयं का जेनेरिक इंटरफ़ेस बना सकते हैं जो विस्तारित है Event। कुछ इस तरह?

interface DOMEvent<T extends EventTarget> extends Event {
  target: T
}

तब आप इसका उपयोग कर सकते हैं जैसे:

handleChange(event: DOMEvent<HTMLInputElement>) {
  this.setState({ value: event.target.value });
}

Answer 6

टाइपस्क्रिप्ट के साथ हम प्रकार का लाभ उठा सकते हैं, जैसे:

type KeyboardEvent = {
  target: HTMLInputElement,
  key: string,
};
const onKeyPress = (e: KeyboardEvent) => {
  if ('Enter' === e.key) { // Enter keyboard was pressed!
    submit(e.target.value);
    e.target.value = '';
    return;
  }
  // continue handle onKeyPress input events...
};

Answer 7

@ बोंगाकाली सही उत्तर प्रदान करते हैं, लेकिन यह वाक्य रचना मेरे लिए अधिक पठनीय और न्यायसंगत है:

eventChange($event: KeyboardEvent): void {
    (<HTMLInputElement>$event.target).value;
}