reactjs - 基于其他属性值的条件类型

Question

在我的项目中，我有一个包含两个道具的组件：

collapsible,
onToggle

我很难在 TypeScript 中为这些道具创建一个类型。问题是，当可折叠时，true我希望 onToggle 函数为 a (): void，但如果可折叠，false我希望 onToggle 未定义。

我试过这样的事情：

type Props = {
  collapsible: boolean;
  onToggle: collapsible ? () => void : undefined;
}

但显然它不起作用，因为在定义 onToggle 类型时未定义可折叠项。如何处理？这甚至可能让类型依赖于值吗？

Answer 1

您可以使用有区别的联合（在 上区分collapsible）：

type Props = {
    common?: string
} & ({
    collapsible?: false;
} | {
    collapsible: true;
    onToggle: () => void
    })

function Test(p: Props) {
    return <></>
}

function Usage() {
    return <>
        <Test /> {/* Ok */}
        <Test collapsible={false} /> {/* Ok */}
        <Test collapsible={true} /> {/* Err, as expected */}
        <Test collapsible={true} onToggle={() => { }} /> {/* ok */}
    </>
}

游乐场链接

Answer 2

你的可折叠道具是布尔类型的，所以它要么是假的/真的，

你不能做这样的事吗

    type Props = {
     collapsible: boolean;
     onToggle():void | undefined;
   }

或者，

      type Props = {
         collapsible: boolean;
         onToggle?():void;
       }

然后在实现时，您可以轻松检查 onToggle 是否未定义。因为如果某些东西是可选的并且没有提供，那么它在 TS 中默认是未定义的。