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

Question

我的组件 Text 有 2 个道具：isHideable: boolean 和 hidden: boolean。仅当isHideable 为true 时，我如何允许Hidden 作为道具？

目前，我同时接受 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 };