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;
   }

OR，

      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

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

2 个答案: