使用 TypeScript 自定义 Hooks - 返回值

Question

我正在尝试使用 TS 来试验自定义 Hooks（两者都很新）。这useOption应该采用 anumber或 a boolean，并返回value具有相同类型的 和更改器函数。这是因为选项应该是<input>“范围”类型，并且一个<input>选项应该是复选框（但这可以使用其他输入类型进行扩展）。所以我有一个<Options />这样的组件：

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

  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'
        value={sound}
        onChange={setSound} />
      <p>{sound ? 'Sound on' : 'Sound off'}</p>
      <button
        className='start-btn'
        onClick={handleClick}>Start game</button>
    </div>
  )
};

以及一个自定义钩子 useOption。

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

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (typeof(e.currentTarget.value) === 'boolean') {
      const newValue = !value;
      setValue(newValue);     
    } 
    else {
      const newValue = Number(e.currentTarget.value);
      setValue(newValue)
    }
  };

  return [value, handleChange] as const;
};

我认为，通过typeof类型保护和使用const（如本页中所写），TS 识别了返回的类型，但我仍然有关于它的错误，向我显示属性上的错误value。

Type 'number | boolean' is not assignable to type 'string | number | readonly string[] | undefined'.
  Type 'false' is not assignable to type 'string | number | readonly string[] | undefined'.ts(2322)
index.d.ts(2256, 9): The expected type comes from property 'value' which is declared here on type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'

有什么建议来解决它吗？

Answer 1

您可以使钩子通用

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

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (typeof e.currentTarget.value === 'boolean') {
      const newValue = !value;
      setValue(newValue as T);
    } else {
      const newValue = Number(e.currentTarget.value);
      setValue(newValue as T);
    }
  };

  return [value, handleChange] as const;
};

并在组件中传递类型

export default function App() {
  const [pieces, setPieces] = useOption<number>(10);
  const [speed, setSpeed] = useOption<number>(5);
  const [sound, setSound] = useOption<boolean>(false);

  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} onChange={setSound} /> // use checked in here
      <p>{sound ? 'Sound on' : 'Sound off'}</p>
    </div>
  );
}

演示