Каков правильный тип событий ввода файла?
Я использую Vue и имею простой ввод файла с прослушивателем изменений.
<script setup lang = "ts">
function handleSelectedFiles(event: Event) {
const fileInputElement = event.target as HTMLInputElement;
if (!fileInputElement?.files) {
return;
}
// handle files ...
}
</script>
<template>
<input type = "file" @change = "handleSelectedFiles"/>
</template>
Код работает нормально, но проверка типа завершается с кодом ошибки. я получаю сообщение об ошибке
ошибка TS2322: тип «(событие: событие) => void» не может быть назначен типу «событие».
Какой правильный тип параметра для функции handleSelectedFiles?
В качестве примечания: я просто хочу загрузить некоторые файлы и обработать их, чтобы были лучшие способы чтения выбранных файлов из ввода.
В целях размножения:
- Создайте новый проект через
npm init vue@latest(просто выберите все) - Замените файл App.vue содержимым HTML, опубликованным выше.
- Беги
npm run type-check, должно пройти - Обновите зависимость
typescriptдо4.8.4и@types/nodeдо18.11.0 - Запустите проверку типа еще раз, теперь она должна завершиться ошибкой
тогда я получаю Type '(event: ChangeEvent<HTMLInputElement>) => void' is not assignable to type 'Event'.
(у меня мало опыта работы с vue, но из того, что я знаю в машинописном тексте), это означает, что @change пытается установить событие, а не функцию, которая принимает событие. Хотя это немного странно. На самом деле, судя по другому вопросу StackOverflow, они используют @change = "onChange($event)". Посмотрите, работает ли это.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вам нужно вызвать событие изменения через параметр $event:
<template>
<input type = "file" @change = "handleSelectedFiles($event)"/>
</template>
Причина, по которой вы получили ошибку, заключалась в том, что Vue пытался передать Event функции, которая принимает событие:
// what vue was trying to pass in (the type of $event)
const event: Event = { ... }
// what you actually had
const numFunction: ((event: Event) => void) => { console.info(num) }
Вот почему вам нужно вызывать функцию с локальной переменной $event, и эта функция должна принимать событие, а не специализированное событие — это может потребовать приведения с вашей стороны, если вы хотите больше подсказок типа
Вы можете найти больше информации в Документации Vue
но что это за тип $event? Если это Event, то код должен быть идентичным, и тогда я не знаю, почему он не работает. На примере документации vuejs.org/guide/essentials/event-handling.html#method-handlers
Судя по вашей ошибке ранее, тип $event — Event. Проблема в том, что вы не можете назначить Event на (event: Event) => void. Один воспринимает событие, а другой является событием. Я уточнил больше в своем ответе.
не могли бы вы сказать мне, какой параметр следует handleSelectedFiles ожидать вместо этого?
Из вашей ошибки типа: not assignable to type 'Event'., он ищет тип Event.
но функция ожидает тип Event?
Vue ожидает, что вы передадите $event в качестве параметра функции handleSelectedFiles: vuejs.org/guide/essentials/…
Вы ищете ChangeEvent<HTMLInputElement>?