React中使用泛型为useState Hook标注类型时的类型错误问题

你的问题出在handleInput函数里重复声明了泛型<Type>，这个内部的Type和外层Hook的泛型Type是完全独立的两个类型参数，导致你传入setValue的_value是内部Type类型，而state的value是外层Type类型，两者无法匹配，就抛出了类型错误。

修正步骤： #

1. 删掉handleInput函数的<Type,>泛型声明，直接复用外层Hook的泛型参数Type
2. 给_validationFunc加上明确的类型定义，避免隐式any的问题

修正后的完整代码：

// 先定义InputValidationState的结构类型
type InputValidationState<Type> = {
  isValid: boolean;
  message: string;
  value: Type | undefined;
  handleInput: (value: Type) => void;
};

// 定义验证函数的类型规范
type ValidationFunction<Type> = (value: Type) => { isValid: boolean; message: string };

export function useInputValidation<Type>(_validationFunc: ValidationFunction<Type> | null = null): InputValidationState<Type> {
  const [isValid, setIsValid] = useState(false);
  const [message, setMessage] = useState("");
  const [value, setValue] = useState<Type>();

  /** handle input of control */
  const handleInput = (_value: Type): void => {
    const result =
      _validationFunc === null
        ? { isValid: true, message: "all good" }
        : _validationFunc(_value);

    setMessage(result.message);
    setIsValid(result.isValid);
    setValue(_value); // 现在类型完全匹配
  };

  return {
    isValid,
    message,
    value,
    handleInput
  };
}

为什么之前的情况会有差异： #

• 当你直接用useState<string>()时，没有在内部函数重新声明泛型，setTest的参数类型就是明确的string，自然不会有类型冲突
• 而你用泛型Hook时，内部handleInput重新声明了<Type>，相当于创建了一个新的、和外层无关的类型参数，TypeScript无法将它和外层的Type关联起来，因此出现了类型不兼容的错误

另外，不要用any绕过类型检查，这会丢失TypeScript的类型安全优势，上面的修正方案既保留了泛型的灵活性，同时彻底解决了类型错误。

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