TypeScript自定义Hook useOption返回值类型错误问题排查与解决

问题根源分析 #

1. Checkbox属性误用：HTML的<input type="checkbox">选中状态由checked属性控制，而非value。你之前把boolean类型的sound绑定到value属性，但value仅接受string | number | readonly string[] | undefined，直接导致类型不匹配。
2. Hook类型不够精确：原useOption用number | boolean作为初始值类型，返回的状态值也是联合类型，TypeScript无法区分具体是number还是boolean，导致绑定到range输入时逻辑正确但类型检查不通过。
3. 错误的类型判断：e.currentTarget.value永远是string类型（无论input是range还是checkbox），所以typeof(e.currentTarget.value) === 'boolean'这个判断永远为false，完全无效。

修正方案 #

1. 泛型化useOption Hook

通过泛型让TypeScript根据初始值推断具体状态类型，同时修正状态更新逻辑：

import { useState } from 'react';

const useOption = <T extends number | boolean>(initialValue: T) => {
  const [value, setValue] = useState<T>(initialValue);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // 根据初始值类型区分处理逻辑
    if (typeof initialValue === 'boolean') {
      // 处理checkbox：取checked属性
      setValue(e.currentTarget.checked as T);
    } else {
      // 处理range：将字符串值转为number
      setValue(Number(e.currentTarget.value) as T);
    }
  };

  return [value, handleChange] as const;
};

2. 修正Options组件的Checkbox绑定

把checkbox的value属性改为checked：

const Options = () => {
  const [pieces, setPieces] = useOption(10);
  const [speed, setSpeed] = useOption(5);
  const [sound, setSound] = useOption(false);

  const handleClick = () => {
    console.log('游戏启动参数：', { pieces, speed, sound });
  };

  return (
    <div className='Options'>
      <input
        type='range'
        value={pieces}
        onChange={setPieces}
        min='5'
        max='25'
      />
      <p>{pieces}</p>
      <input
        type='range'
        value={speed}
        onChange={setSpeed}
        min='1'
        max='10'
      />
      <p>{speed}</p>
      <input
        type='checkbox'
        checked={sound} // 替换为checked属性
        onChange={setSound}
      />
      <p>{sound ? '声音开启' : '声音关闭'}</p>
      <button
        className='start-btn'
        onClick={handleClick}
      >开始游戏</button>
    </div>
  );
};

修正后的效果 #

• TypeScript能正确推断pieces和speed为number类型，匹配range输入的value属性要求；
• sound为boolean类型，绑定到checkbox的checked属性，符合React输入控件类型规则；
• 状态更新逻辑根据初始值类型自动适配，无需额外判断input类型。

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