reactjs - 基于其他 Prop 值(value)的条件类型

Question

在我的项目中，我有一个组件需要两个 Prop :

collapsible,
onToggle

我很难在 TypeScript 中为这些 Prop 创建类型。问题是当 collapsible 为 true 我希望 onToggle 函数为 (): void 但如果 collapsible 为 false 我想要onToggle 未定义。

我试过这样的:

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

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

Answer 1

您可以使用可区分的联合(在 collapsible 上可区分):

type Props = {
    common?: string
} & ({
    collapsible?: false;
    onToggle?: never;
} | {
    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