表单事件的Typescript接口声明

interface ChangeEvent<T = Element> {
    target: T & { value: string };
}

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

interface SubmitEvent<T = EventTarget> extends Event {
    target: T & HTMLFormElement;
    preventDefault(): void;
}

function handleSubmit(event: SubmitEvent<HTMLFormElement>) {
    event.preventDefault();
    console.log('Form submitted');
}

interface FocusEvent<T = Element> extends Event {
    relatedTarget: EventTarget | null;
}

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

function handleBlur(event: FocusEvent<HTMLInputElement>) {
    console.log('Input blurred');
}

function handleChange(event: ChangeEvent<HTMLInputElement>) {
    console.log(event.target.value); // 现在TypeScript能正确推断value的类型为string
}

import React from 'react';

interface MyFormProps {}

const MyForm: React.FC<MyFormProps> = () => {
    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
        console.log(event.target.value);
    };

    const handleSubmit = (event: SubmitEvent<HTMLFormElement>) => {
        event.preventDefault();
        console.log('Form submitted');
    };

    return (
        <form onSubmit={handleSubmit}>
            <input type="text" onChange={handleChange} />
            <button type="submit">Submit</button>
        </form>
    );
};

export default MyForm;