SolidJS中如何注解Input事件？解决TypeScript类型不兼容问题

核心问题 #

你遇到的问题是：TypeScript对onInput事件的target类型推断为宽泛的Element，无法直接访问name和value属性；手动扩展类型后，又因为实际事件的target类型不匹配而报错。

方案1：使用currentTarget替代target #

currentTarget已经被TypeScript推断为HTMLInputElement（因为事件绑定在input元素上），本身就包含name和value属性，无需额外扩展类型：

// 定义handleInput时直接使用已有类型
const handleInput = (e: InputEvent & { currentTarget: HTMLInputElement }) => {
    setForm({
        ...form(),
        [e.currentTarget.name]: e.currentTarget.value,
    });
}

// Input组件添加对应name属性
<input
    type="text"
    name="username"
    value={form().username}
    onInput={handleInput}
/>

方案2：给input添加name属性，让TypeScript自动推断精确类型 #

当input元素明确设置name属性后，TypeScript会自动将事件的target推断为HTMLInputElement，此时无需手动修改事件类型：

// Input组件添加name属性
<input
    type="text"
    name="username"
    value={form().username}
    onInput={(e) => handleInput(e)}
/>

// handleInput直接使用推断出的类型即可访问name和value
const handleInput = (e: InputEvent & {
    currentTarget: HTMLInputElement;
    target: HTMLInputElement;
}) => {
    setForm({
        ...form(),
        [e.target.name]: e.target.value,
    });
}

方案3：类型断言（快速解决） #

如果不想修改事件类型定义，可以在访问target时用类型断言明确其为HTMLInputElement：

const handleInput = (e: InputEvent & {
    currentTarget: HTMLInputElement;
    target: Element;
}) => {
    // 断言target为HTMLInputElement
    const inputTarget = e.target as HTMLInputElement;
    setForm({
        ...form(),
        [inputTarget.name]: inputTarget.value,
    });
}

方案4：自定义通用表单输入事件类型 #

如果需要在多个表单输入组件复用这个类型，可以自定义一个通用类型：

type FormInputEvent = InputEvent & {
    currentTarget: HTMLInputElement;
    target: HTMLInputElement;
};

const handleInput = (e: FormInputEvent) => {
    setForm({
        ...form(),
        [e.target.name]: e.target.value,
    });
}

// Input组件添加name属性确保类型匹配
<input
    type="text"
    name="username"
    value={form().username}
    onInput={handleInput}
/>

内容的提问来源于stack exchange，提问作者RobKohr