如何使用typescript制作一个适用于所有输入类型的onChange函数

Question

我有以下两个函数：

function getValue(e: ChangeEvent<HTMLInputElement>) {
let { value, type, checked } = e.target;
if (type === "number") {
return parseInt(value, 10);
}
if (type === "checkbox") {
return checked;
}
return value;
}
function handleChange(e: ChangeEvent<HTMLInputElement>) {
const { name } = e.target;
setInputs({ ...inputs, [name]: getValue(e) });
}

以下是两种示例情况：

<input
id="ingrName"
type="text"
name="name"
value={inputs.name}
disabled={addingIngredient}
onChange={handleChange}
/>
<select
id="ingrCat"
name="categoryId"
value={inputs.categoryId}
onChange={handleChange}
>

问题：在select的onChange上，typescript会发出以下警告：Type '(e: ChangeEvent<HTMLInputElement>) => void' is not assignable to type 'ChangeEventHandler<HTMLSelectElement>'.

当我将HTMLInputElement | HTMLSelectElement添加到ts函数时，我在{checked}上得到下一个警告

Property 'checked' does not exist on type 'EventTarget & (HTMLInputElement | HTMLSelectElement)'.

每次我试图修复打字脚本问题时，都会弹出下一个。。。我真的想对所有的输入元素只使用一个函数，但我不知道如何键入这个函数。

Answer 1

将两个函数的参数类型更改为

ChangeEvent<HTMLInputElement & HTMLSelectElement>