Отображается ошибка в коде TypeScript Next js, хотя ошибки нет. Как исправить?

Question

[penta-bongo]

Изучаю тс, и заметил, то что классические вещи помечаются как ошибки, у других посмотрел видео такого нет, как можно исправить или что я сделал не так?
Пишет это: Свойство "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

Answer 1

[Rsa97]

TS - он про типы.
Вы создаёте функцию, которая принимает на вход тип HTMLButtonElement, а использовать её пытаетесь как обработчик события click, который передаёт параметр с типом MouseEvent.

Comments

[penta-bongo]

Спасибо, поменял-помогло