Typescript 反應功能組件中的道具歧視

Question

我正在創建一個動態小部件，它可以是空的也可以是已填充的。 它應該默認為空。 當populated={true}時，我希望需要totalGross和totalNet值。 否則，不應允許使用這兩個道具。

為此，我正在嘗試使用區分類型（ WidgetBodyProps ）。 然而，TypeScript 抱怨因為totalNet和totalGross是<WidgetBodyPopulated />中必需的道具

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

一旦你解構了道具，Typescript 就會忘記它們曾經是相關的。 因此，對一個變量的測試不會區分另一個變量的類型。 但是在你解構props的時候你還沒有測試它的類型，所以所有的變量都是以所有的可能性被類型化的。

但是，如果你避免解構，那么 Typescript 可以密切關注props的類型。 通過這種方式測試道具的屬性可以縮小您期望的道具類型。

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

然后你甚至可以將這些道具簡化為：

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

因為您永遠不會在不先檢查.isEmpty的情況下訪問.totalNet 。

工作示例

Answer 2

通常發生此錯誤是因為 Typescript 不相信您某些東西不是 null。使用非空斷言運算符告訴 Typescript 它可以相信您知道自己在做什么，並且您不會向它提供 null。另一種選擇是確保相關變量正確設置為空字符串。