Блог

Вопрос: Есть ли способ объединить типы различных событий HTML DOM в Typescript?

(Я знаю, что могу избежать этой ошибки, разделив свою функцию на две разные функции, но я хочу этого избежать)

Мой компонент выглядит примерно так:

 const TestComponent: React.FC = () => {
const handleFileChange = (e: React.DragEvent | React.SyntheticEvent) => {
  const fileData = e.dataTransfer || e.target;
});

return (
  <div>
    <div onDrop={handleFileChange} />
    <input type="file" onChange={handleFileChange} />
  </div>
)};
 

Ошибка, которую я получаю, находится e.dataTransfer внутри handleFileChange функции:

 Property 'dataTransfer' does not exist on type 'SyntheticEvent<Element, Event> | DragEvent<Element>'.
Property 'dataTransfer' does not exist on type 'SyntheticEvent<Element, Event>'.
 

Я понимаю эту ошибку и почему это происходит, но я не могу найти обходной путь для этого с помощью typescript, какие-либо ссылки на документы, на которые я должен смотреть?

Ваши типы в порядке, вам просто нужно проверить dataTransfer , существует ли он, прежде чем использовать его:

 const handleFileChange = (e: React.DragEvent | React.SyntheticEvent) => {
  const fileData = 'dataTransfer' in e ? e.dataTransfer : e.target;
};
 

Вы можете попробовать что-то вроде этого.

 const TestComponent: React.FC = () => {

  // you can use any value you want as `type`
  const handleFileChange = (type: "input" | "drop", e: React.DragEvent | React.SyntheticEvent) => {
    if (type === "drop") {
      const fileData = (e as React.DragEvent).dataTransfer
    }

    if (type === "input") {
      const target = e.target
    }

    // if there are any other events
  }

  return (
    <div>
      <div onDrop={handleFileChange.bind(null, "drop")} />
      <input type="file" onChange={handleFileChange.bind(null, "input")} />
    </div>
  )
}
 

Просто привяжите тип к событию, чтобы с каждым event типом вы могли решить, что вы хотите сделать.