Как обрабатывать типы событий union DOM?

Question

Можно ли проверить правильность типа события позже, чтобы приведенный ниже код стал безопасным для типа. Поскольку прямо сейчас выдаются следующие предупреждения:

  Property 'key' does not exist on type 'ClipboardEvent'

Property 'clipboardData' does not exist on type 'KeyboardEvent | ClipboardEvent'.
  Property 'clipboardData' does not exist on type 'KeyboardEvent'.ts(2339)

Вот действующая копия кода ниже в codesbox: https://codesandbox.io/s/hardcore-hugle-i8w1j

function cleanInputValue (event: KeyboardEvent | ClipboardEvent): void {
  let incomingValue: string = ``

  switch (true) {
    case typeof event.key !== `undefined`:
      incomingValue = event.key
      break
    case typeof event.clipboardData !== `undefined`:
      incomingValue = event.clipboardData.getData(`text`)
  }
}

Answer 1

Для этого вы можете написать собственную защиту типа.

function cleanInputValue (event: KeyboardEvent | ClipboardEvent): void {
  let incomingValue: string = ``;

  if ('key' in event) {
    incomingValue = event.key
  } else if ('clipboardData' in event && event.clipboardData) {
    incomingValue = event.clipboardData.getData(`text`)
  }
}

if else проверяет свойство key для типа объединения и сужает его до KeyboardEvent. Аналогично для ClipboardEvent, проверка сужается до ClipboardEvent от определенного вами типа объединения.

Защита типа пользователя TS Docs

Answer 2

Я предложил способ Typescript - вам нужно определить две функции, тип возвращаемого значения которых является предикатом типа: ClipboardEvent или KeyboardEvent. ( Документ )

Проверка event это событие ClipboardEvent или нет:

function isClipboardEvent(event: KeyboardEvent | ClipboardEvent): event is ClipboardEvent {
  return (event as ClipboardEvent).clipboardData !== undefined
}

еще раз, проверка event это событие KeyboardEvent или нет:

function isKeyboardEvent(event: KeyboardEvent | ClipboardEvent): event is KeyboardEvent {
  return (event as KeyboardEvent).key !== undefined
}

Теперь, в функции cleanInputValue, просто проверьте объект event и выполните свою задачу:

function cleanInputValue(event: KeyboardEvent | ClipboardEvent): void {
  let incomingValue: string = ``

  if (isClipboardEvent(event) && event.clipboardData) { // clipboardData can be null
    incomingValue = event.clipboardData.getData(`text`)
  } else if (isKeyboardEvent(event)) {
    incomingValue = event.key
  }
}