基于其他道具价值的条件类型

Question

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

collapsible,
onToggle

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

我试过这样的事情：

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

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

Answer 1

您的折叠道具是布尔类型的，所以它要么是 false/true，

你不能做这样的事情吗，

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

或者，

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

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

Answer 2

您可以使用可区分联合（在 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 */}
    </>
}

Playground Link

基于其他道具价值的条件类型

Conditional type based on value of other prop

toggle

typescript

reactjs

react-props

react-typescript