javascript - react 功能组件中的 typescript Prop 歧视

Question

我正在创建一个动态小部件，它可以是空的也可以是已填充的。它应该默认为空。当populated={true} , 我想要 totalGross和 totalNet需要的值。否则，不应允许使用这 2 个 Prop 。

为此，我尝试使用区分类型 ( WidgetBodyProps )。但是，TypeScript 会提示，因为 totalNet & totalGross在 <WidgetBodyPopulated /> 中需要 Prop

type WidgetBodyProps =
    | { isEmpty?: false; totalNet: string; totalGross: string }
    | { isEmpty: true; totalNet?: never; totalGross?: never };

type WidgetProps = WidgetHeaderProps & WidgetBodyProps;

const Widget = (props: WidgetProps) => {
    const { title = "", isEmpty = true, totalNet, totalGross } = props;

    return (
        <Card>
            <Box>
                <WidgetHeader title={title} />
                <Divider my="4" />
                {isEmpty ? (
                    <WidgetBodyEmpty flex="1" />
                ) : (
                    <WidgetBodyPopulated totalNet={totalNet} totalGross={totalGross} />
                )}
            </Box>
        </Card>
    );
};

如何修复此 Typescript 错误？

Answer 1

一旦你解构了 Prop ，Typescript 就会忘记它们曾经是相关的。因此，对一个变量的测试不会区分另一个变量的类型。但是在你解构 props 的时候，你还没有测试它的类型，所以所有的变量都被输入了所有的可能性。

但是，如果您避免解构，则 Typescript 可以密切关注 props 的类型。通过这种方式测试 props 的属性可以缩小您期望的 props 类型。

{props.isEmpty ? (
    <WidgetBodyEmpty flex="1" />
) : (
    <WidgetBodyPopulated
      totalNet={props.totalNet}
      totalGross={props.totalGross}
    />
)}

然后你甚至可以将这些 props 简化为:

type WidgetBodyProps =
    | { isEmpty?: false; totalNet: string; totalGross: string }
    | { isEmpty: true };

因为如果不先检查 .isEmpty，您永远不会访问 .totalNet。

Working example