1

所以我试图进入类型断言和条件类型，当我似乎进入时，我决定将它应用到一个真实的案例然后......你可以猜到......到处都是错误。

所以我在 Sandbox 上创建了这个示例案例：

  • 一个Input组件
  • 一个Checkbox组件
  • 一个useInput钩子

useInput 是负责管理 onChange 的，它只是为 Input 元素开始的。然后我也可以创建一个 useCheckbox 。但是它们会非常相似，以至于我想，现在是与条件类型打架的好时机，因为从javascript我可以使用例如 Switch 来管理值的类型

但现在Input他们Checkbox都在抱怨，因为他们可以获得其他一些值类型，

在此处输入图像描述 在此处输入图像描述

嗯，这发生在 useInput 声明中。但是有没有办法告诉 useInput 嘿，这个值只是一个布尔值，或者另一方面可能是一个字符串、数字等。

因此该值可以是输入文本 oa 检查值类型（布尔值）

type valueType = string | number | string[] | null;
type checkedType = boolean;
type inputValueType = [
  valueType | checkedType,
  Dispatch<SetStateAction<valueType | checkedType>>
];

// 使用Input.tsx

import React, { useState, ChangeEvent, Dispatch, SetStateAction } from "react";

type valueType = string | number | string[] | null;
type checkedType = boolean;
type inputValueType = [
  valueType | checkedType,
  Dispatch<SetStateAction<valueType | checkedType>>
];

export type onChangeType = (event: ChangeEvent<HTMLInputElement>) => void;

const useInput = (initialValue = "") => {
  const [value, setValue]: inputValueType = useState(initialValue);

  const reset = () => setValue("");

  const onChange: onChangeType = ({ target }) => {
    switch (target.type) {
      case "checkbox":
      case "radio":
        setValue(target.checked);
        break;
      case "number":
      case "range":
        setValue(parseFloat(target.value));
        break;
      default:
        setValue(target.value);
    }
  };


  if (typeof initialValue === "boolean") {
    return [value, onChange, reset] as [boolean, onChangeType, () => void];
  } else {
    return [value, onChange, reset] as [
      string | number | string[] | null,
      onChangeType,
      () => void
    ];
  }
};

export default useInput;

我希望这个示例足够清晰，因为 T extends U ? X : Y一开始阅读多篇文章太抽象了。

提前致谢

4

0 回答 0