在具有泛型类型的 TS 中获取"不可分配"

Question

我是TypeScript的新手，我正在尝试构建一个自定义的React钩子来存储一些输入(并相应地更新它(。我想通过让钩子/函数将输入存储为字符串或数字来使其更通用。但到目前为止，在onChange函数中，当设置状态时，我得到了以下错误：Argument of type 'string' is not assignable to parameter of type 'SetStateAction<T>'.我确实知道哪里出了问题，但我不知道如何修复它。我知道我可以制作两个单独的函数，但其中的乐趣在哪里；D

应该这样使用：

const inputNumber = useInput<number>(1);
return(<input
type="text"
value={inputNumber.value}
onChange={inputNumber.onChange}
/>);

这是我的代码：

import { useState } from "react";
export default function useInput<T extends string | number>(
init: T
): useInputT<T> {
const [input, setInput] = useState<T>(init);
function onChange(e: React.ChangeEvent<HTMLInputElement>): void {
switch (typeof init) {
case "string":
setInput(e.target.value);
break;
case "number":
setInput(parseInt(e.target.value));
break;
}
}
return { value: input, onChange };
}
type useInputT<T> = {
value: T;
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
};

Answer 1

问题是typeof e.target.value !== T。您的setInput希望您将其设置为类型T。在您的setInput调用中，您可以将其强制转换为T以避免这种情况。前setInput(e.target.value as T)

这是一个小代码沙盒https://codesandbox.io/s/interesting-poincare-6h3d5o?file=/src/App.tsx