"argument of type string ist not assignable to param of custom type" 的难看问题

Question

我得到了一个有效的打字稿代码，请参阅代码段。 TS 的问题是，它将代码声明为虚假消息：

Argument of type 'string' is not assignable to parameter of type 'SetStateAction<"vertical" | "horizontal" | "vertical-reverse" | "horizontal-reverse">'.

我怎样才能写出更干净的代码？我考虑过使用类型或枚举，但后来我遇到了许多不必要的强制转换，这降低了可读性，并且它变成了意大利面条代码，因为我为此编写了很多代码。

这里是代码：

const directionItems = [
    { key: 0, label: "vertical" },
    { key: 1, label: "horizontal" },
    { key: 2, label: "vertical-reverse" },
    { key: 3, label: "horizontal-reverse" }
  ];

  const [curDirection, setCurDirection] = React.useState<
    "vertical" | "horizontal" | "vertical-reverse" | "horizontal-reverse"
  >("vertical");

<DropDown
   items={directionItems}
   defaultSelectedIndex={3}
   onSelectionChange={value =>
   setCurDirection(directionItems[value].label) // <-- this is where the compiler gets angry even if it just works
 }></DropDown>

这里还有使用枚举的方法，但我认为这种方法需要很多代码，或者这是合法的吗？（使用这种方法编译器没有错误）：

enum position {
    "top",
    "bottom",
    "left",
    "right",
    "in-between"
  }

  const buttonPositionItems = [
    { key: 0, label: position[0] },
    { key: 1, label: position[1] },
    { key: 2, label: position[2] },
    { key: 3, label: position[3] },
    { key: 4, label: position[4] }
  ];

  const [curButtonPosition, setButtonPosition] = React.useState<position>(
    position.right
  );

 <DropDown
    items={buttonPositionItems}
    defaultSelectedIndex={3}
    onSelectionChange={value =>
      setButtonPosition(
      (buttonPositionItems[value].label as unknown) as position)
    }
></DropDown>

我现在的解决方案（虽然我没有使用界面..）

export type DirectionType = | "vertical" | "horizontal" | "vertical-reverse" | "horizontal-reverse";

const directionItems = [
    { key: 0, label: "vertical" },
    { key: 1, label: "horizontal" },
    { key: 2, label: "vertical-reverse" },
    { key: 3, label: "horizontal-reverse" }
  ];

  const [curDirection, setCurDirection] = React.useState<DirectionType>(
    "vertical"
  );

<DropDown
  onSelectionChange={value =>
     setCurDirection(directionItems[value].label as DirectionType )
     }>/<DropDown>

Answer 1

您可能希望使用接口来提供显式类型化，这样 TypeScript 就会识别出 label 属于 "vertical" | "horizontal" | "vertical-reverse" | "horizontal-reverse" 类型。例如，您可以使用 type aliases。

export type LabelType = ("vertical" | "horizontal" | "vertical-reverse" | "horizontal-reverse");

export interface DirectionItem {
  key: number;
  label: LabelType;
}

现在，我们可以将接口与您的 React 功能组件一起使用。

const directionItems: DirectionItem[] = [
    { key: 0, label: "vertical" },
    { key: 1, label: "horizontal" },
    { key: 2, label: "vertical-reverse" },
    { key: 3, label: "horizontal-reverse" }
  ];

const [curDirection, setCurDirection] = React.useState<LabelType>("vertical");

"argument of type string ist not assignable to param of custom type" 的难看问题

Unsightly problem with "argument of type string ist not assignable to param of custom type"

javascript

typescript

reactjs

react-tsx