Я просто хочу це зробити зі своїм KeyboardEvent

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

Хоча Event.target має тип EventTarget, він не успадковується від Element. Тому я маю це робити так:

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

Можливо, це пов’язано з тим, що деякі браузери не дотримуються стандартів, правда? Яка правильна агностична реалізація браузера в TypeScript?

PS: Я використовую jQuery для захоплення KeyboardEvent.

Це не успадковується з-за того, Elementщо не всі цілі події є елементами.

Від MDN :

Елемент, документ і вікно - найпоширеніші цілі подій, але інші об'єкти можуть бути і цілями подій, наприклад XMLHttpRequest, AudioNode, AudioContext та інші.

Навіть те, KeyboardEventщо ви намагаєтеся використовувати, може виникнути на елементі DOM або на об'єкті вікна (і теоретично на інших речах), тому прямо там не було б сенсу evt.targetвизначатись якElement .

Якщо це подія на елементі DOM, то я б сказав, що ви можете сміливо припускати evt.target. є Element. Я не думаю, що це питання поведінки між веб-переглядачами. Просто EventTargetце більш абстрактний інтерфейс, ніжElement .

Подальше читання: https://typescript.codeplex.com/discussions/432211

Використовуючи машинопис, я використовую користувальницький інтерфейс, який стосується лише моєї функції. Приклад використання випадку.

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

У цьому випадку handleChange отримає об’єкт із цільовим полем, що має тип HTMLInputElement.

Пізніше в коді я можу використовувати

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

Більш чистим підходом було б розміщення інтерфейсу в окремому файлі.

interface HandleNameChangeInterface {
  target: HTMLInputElement;
}

потім використовуйте таке визначення функції:

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

У моєму випадку використання чітко визначено, що єдиним абонентом, що обробляєChange, є тип елемента HTML, що вводиться.

Відповідь JLRishe правильна, тому я просто використовую це у своєму обробнику подій:

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

Машинопис 3.2.4

Для отримання властивості ви повинні націлити ціль на відповідний тип даних:

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

Чи можете ви створити власний загальний інтерфейс, який розширюється Event. Щось на зразок цього?

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

Тоді ви можете використовувати його так:

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

За допомогою typecript ми можемо використовувати псевдоніми типу:

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...
};

@Bangonkali дають правильну відповідь, але цей синтаксис здається мені більш зрозумілим і приємнішим:

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