Типизация событий

import type { MouseEvent } from 'react';

function Button() {
    function handleClick(e: MouseEvent<HTMLButtonElement>) {
        console.log(e.clientX, e.clientY);
    }

    return <button onClick={handleClick}>OK</button>;
}

import type { ChangeEvent } from 'react';

function Input() {
    function handleChange(e: ChangeEvent<HTMLInputElement>) {
        console.log(e.target.value);
    }

    return <input onChange={handleChange} />;
}

function Select() {
    function handleChange(e: ChangeEvent<HTMLSelectElement>) {
        console.log(e.target.value);
    }

    return <select onChange={handleChange} />;
}

function Textarea() {
    function handleChange(e: ChangeEvent<HTMLTextAreaElement>) {
        console.log(e.target.value);
    }

    return <textarea onChange={handleChange} />;
}

import type { FormEvent } from 'react';

function Form() {
    function handleSubmit(e: FormEvent<HTMLFormElement>) {
        e.preventDefault();
        const data = new FormData(e.currentTarget);
    }

    return <form onSubmit={handleSubmit}>...</form>;
}

import type { KeyboardEvent } from 'react';

function Input() {
    function handleKeyDown(e: KeyboardEvent<HTMLInputElement>) {
        if (e.key === 'Enter') {
            console.log('Enter');
        }
    }

    return <input onKeyDown={handleKeyDown} />;
}

import type { FocusEvent } from 'react';

function Input() {
    function handleFocus(e: FocusEvent<HTMLInputElement>) {
        console.log('focused');
    }

    return <input onFocus={handleFocus} />;
}

function Card() {
    function handleEnter(e: MouseEvent<HTMLDivElement>) {}
    function handleLeave(e: MouseEvent<HTMLDivElement>) {}

    return <div onMouseEnter={handleEnter} onMouseLeave={handleLeave} />;
}

import type { UIEvent } from 'react';

function Scroller() {
    function handleScroll(e: UIEvent<HTMLDivElement>) {
        console.log(e.currentTarget.scrollTop);
    }

    return <div onScroll={handleScroll} />;
}

import type { DragEvent } from 'react';

function Draggable() {
    function handleDragStart(e: DragEvent<HTMLDivElement>) {
        e.dataTransfer.setData('text', 'hello');
    }

    return <div draggable onDragStart={handleDragStart} />;
}

import type { TouchEvent } from 'react';

function Button() {
    function handleTouch(e: TouchEvent<HTMLButtonElement>) {
        console.log(e.touches[0].clientX);
    }

    return <button onTouchStart={handleTouch}>OK</button>;
}

<button onClick={(e) => console.log(e.clientX)}>OK</button>

function Form() {
    function handleSubmit(e: FormEvent<HTMLFormElement>) {
        e.currentTarget; // HTMLFormElement — надёжно
        e.target;        // EventTarget | null — нужно сужать
    }
}