لماذا يكون Event.target ليس Element في TypeScript؟

أريد ببساطة القيام بذلك باستخدام KeyboardEvent الخاص بي

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

بينما يكون Event.target من نوع EventTarget، إلا أنه لا يرث من Element. لذا يجب علي تحويله بهذا الشكل:

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

من المحتمل أن يكون هذا بسبب عدم اتباع بعض المتصفحات للمعايير، أليس كذلك؟ ما هي الطريقة الصحيحة للتنفيذ التي لا تعتمد على المتصفح في TypeScript؟

ملاحظة: أنا أستخدم jQuery لالتقاط KeyboardEvent.

الإجابة رقم 1

إجابة JLRishe صحيحة، لذلك أنا ببساطة أستخدم هذا في معالج الحدث الخاص بي:

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

الإجابة رقم 2

لا يرث من Element لأن ليس كل أهداف الأحداث هي عناصر.

من MDN:

العنصر والمستند والنافذة هي الأهداف الأكثر شيوعًا للأحداث، ولكن يمكن أيضًا أن تكون كائنات أخرى أهدافًا للأحداث، على سبيل المثال XMLHttpRequest وAudioNode وAudioContext وأخرى.

حتى أن KeyboardEvent الذي تحاول استخدامه يمكن أن يحدث على عنصر DOM أو على كائن النافذة (ومن الناحية النظرية على أشياء أخرى)، لذا من هناك لن يكون من المنطقي تعريف evt.target كـ Element.

إذا كان الحدث على عنصر DOM، فسأقول أنك يمكنك أن تفترض بأمان أن evt.target هو Element. لا أعتقد أن هذا مسألة تتعلق بسلوك المتصفح المتقاطع. فقط أن EventTarget هو واجهة أكثر تجريدًا من Element.

لمزيد من القراءة: https://github.com/Microsoft/TypeScript/issues/29540

الإجابة رقم 3

باستخدام TypeScript، أستخدم واجهة مخصصة تنطبق فقط على دالتي. مثال على حالة الاستخدام.

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

في هذه الحالة، ستستقبل الدالة handleChange كائناً يحتوي على حقل target من نوع HTMLInputElement.

فيما بعد في شيفرتي يمكنني استخدام

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

النهج الأنظف سيكون وضع الواجهة في ملف منفصل.

interface HandleNameChangeInterface {
  target: HTMLInputElement;
}

ثم استخدم لاحقًا تعريف الدالة التالي:

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

في حالة الاستخدام الخاصة بي، تم تعريفه صراحة أن المتصل الوحيد بـ handleChange هو عنصر HTML من نوع إدخال نصي.

الإجابة رقم 4

تايب سكريبت 3.2.4

لاسترجاع الخاصية يجب تحويل الهدف إلى نوع البيانات المناسب:

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

الإجابة رقم 5

هل يمكنك إنشاء واجهتك العامة الخاصة التي تمتد من Event؟ شيء من هذا القبيل؟

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

ثم يمكنك استخدامه مثل:

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