Отображается ошибка в коде TypeScript Next js, хотя ошибки нет. Как исправить?
Изучаю тс, и заметил, то что классические вещи помечаются как ошибки, у других посмотрел видео такого нет, как можно исправить или что я сделал не так?
Пишет это: Свойство "preventDefault" не существует в типе "ButtonHTMLAttributes".
Для onClick - Тип "(e: React.ButtonHTMLAttributes) => void" не может быть назначен для типа "MouseEventHandler".
Типы параметров "e" и "event" несовместимы.
Тип "MouseEvent" не может быть назначен для типа "ButtonHTMLAttributes".
Типы свойства "type" несовместимы.
Тип "string" не может быть назначен для типа ""button" | "reset" | "submit" | undefined".ts(2322)
index.d.ts(2428, 9): Ожидаемый тип поступает из свойства "onClick", объявленного здесь в типе "DetailedHTMLProps, HTMLButtonElement>"
Для onChange - Тип "(e: React.ChangeEventHandler) => void" не может быть назначен для типа "ChangeEventHandler".
Типы параметров "e" и "event" несовместимы.
Тип "ChangeEvent" не может быть назначен для типа "ChangeEventHandler".
Тип "ChangeEvent" не предоставляет соответствия для сигнатуры "(event: ChangeEvent): void".ts(2322)
index.d.ts(3327, 9): Ожидаемый тип поступает из свойства "onChange", объявленного здесь в типе "DetailedHTMLProps, HTMLInputElement>"
А так же для параметров в фукнции -
Аргумент типа "MouseEvent" нельзя назначить параметру типа "ButtonHTMLAttributes".
"use client" import React from 'react' const page = () => { const handleClick = (e: React.ButtonHTMLAttributes<HTMLButtonElement>) => { e.preventDefault(); console.log("Searched") } const handlerChange = (e: React.ChangeEventHandler<HTMLInputElement>) => { console.log(e.target.value) } const handleDelete = (e: React.ButtonHTMLAttributes<HTMLButtonElement>, id: number) => { e.preventDefault(); console.log(`Post ${id} has been deleted`) } return ( <div className='eventExample'> <form> <input type="text" placeholder='Search for anything...' onChange={handlerChange} /> <button onClick={handleClick}>Search</button> </form> <form className='post'> <h1>Lorem ipsum dolor, sit amet consectetur adipisicing elit 1</h1> <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officia harum ipsa tempora distinctio impedit. Odit tenetur ullam, sequi in repellendus ea veniam quis repellat voluptatibus ex eum quasi, aliquid officiis! </p> <button onClick={(e) => handleDelete(e, 1)}>Delete</button> </form> <form className='post'> <h1>Lorem ipsum dolor, sit amet consectetur adipisicing elit 2</h1> <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officia harum ipsa tempora distinctio impedit. Odit tenetur ullam, sequi in repellendus ea veniam quis repellat voluptatibus ex eum quasi, aliquid officiis! </p> <button onClick={(e) => handleDelete(e,2)}>Delete</button> </form> </div> ) } export default page |
"use client" import React from 'react' const page = () => { const handleClick = (e: React.ButtonHTMLAttributes<HTMLButtonElement>) => { e.preventDefault(); console.log("Searched") } const handlerChange = (e: React.ChangeEventHandler<HTMLInputElement>) => { console.log(e.target.value) } const handleDelete = (e: React.ButtonHTMLAttributes<HTMLButtonElement>, id: number) => { e.preventDefault(); console.log(`Post ${id} has been deleted`) } return ( <div className='eventExample'> <form> <input type="text" placeholder='Search for anything...' onChange={handlerChange} /> <button onClick={handleClick}>Search</button> </form> <form className='post'> <h1>Lorem ipsum dolor, sit amet consectetur adipisicing elit 1</h1> <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officia harum ipsa tempora distinctio impedit. Odit tenetur ullam, sequi in repellendus ea veniam quis repellat voluptatibus ex eum quasi, aliquid officiis! </p> <button onClick={(e) => handleDelete(e, 1)}>Delete</button> </form> <form className='post'> <h1>Lorem ipsum dolor, sit amet consectetur adipisicing elit 2</h1> <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officia harum ipsa tempora distinctio impedit. Odit tenetur ullam, sequi in repellendus ea veniam quis repellat voluptatibus ex eum quasi, aliquid officiis! </p> <button onClick={(e) => handleDelete(e,2)}>Delete</button> </form> </div> ) } export default page
Дополнительно:
TS - он про типы.
Вы создаёте функцию, которая принимает на вход тип HTMLButtonElement, а использовать её пытаетесь как обработчик события click, который передаёт параметр с типом MouseEvent.
- Спасибо, поменял-помогло
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для начала, если вы уверены, что ошибка действительно отсутствует в вашем коде TypeScript Next.js, то возможно проблема заключается в конфигурации TypeScript. Попробуйте следующие шаги для исправления ошибки:
1. Убедитесь, что ваш файл tsconfig.json настроен правильно. Проверьте, что параметр "strict" установлен в значении true, чтобы TypeScript проводил более строгую проверку типов.
{ "compilerOptions": { "strict": true } }
2. Проверьте, что у вас установлена последняя версия TypeScript. Вы можете обновить TypeScript, выполнив следующую команду:
npm install typescript@latestnpm install typescript@latest
3. Попробуйте перезапустить сервер Next.js. Иногда проблемы могут возникать из-за кэширования или несоответствий в сборке проекта.
4. Проверьте все зависимости проекта на предмет возможных конфликтов версий. Убедитесь, что все пакеты обновлены до последних версий.
Если после выполнения этих шагов проблема не исчезает, попробуйте создать новый проект Next.js и скопировать в него ваш код, чтобы убедиться, что проблема не связана с другими частями вашего проекта.
Надеюсь, эти советы помогут вам исправить ошибку в коде TypeScript Next.js! Если у вас остались вопросы, не стесняйтесь задавать.