reactjs - 如何为 React props 定义 TypeScript 类型，其中仅当 prop A 传递给组件时才接受 prop B？

Question

我的组件 Text有 2 个 Prop :isHideable: boolean和 hidden: boolean .我如何允许 Hidden仅在 isHideable 时作为 Prop 是true ？

目前，我同时接受 isHideable和 hidden这不太理想:

type Props = {
  children: React.ReactNode;
  isHideable?: boolean;
  hidden?: boolean;
};

const Text: React.FC = ({ children, isHideable, hidden }: Props) => {
  if (!isHideable && hidden) {
    console.log("No, you can’t do that.")
  }

  return (
    <span isHideable={isHideable} hidden={hidden}>
      {children}
    </span>
  );
};

部分解决方案

我觉得the solution here可能是使用 TypeScript 的 Parameters<F> type alias 的答案，但我无法将事情拼凑在一起。

为什么我不想使用联合类型来解决这个问题？

我相信这可以使用联合类型来解决:

type IsHideable = {
  isHideable: true;
  hidden?: boolean;
}

type IsNotHideable = {
  isHideable?: false;
}

type Props = {
  children: React.ReactNode;
} & (IsHideable | IsNotHideable);

但我想避免这种情况，因为如果接受 props 的条件变得更加复杂，联合会变得更加困惑(例如，如果我希望 prop D 的接受依赖于 prop C，prop C 依赖于 prop B，prop B支持 A)。

Answer 1

我认为联合是表达你的意图的唯一正确方式。关于你担心的乱七八糟的，可以用union & union操作来处理，产生交集类型的并集，见下:

type IHideability = { isHideable?: false } | { isHideable: true, hidden?: boolean }

type IEditability = { isEditable?: false } | { isEditable: true, readonly?: boolean }

type Props = IHideability & IEditability & { children: React.ReactNode };