Javascript react功能组件中的类型脚本属性识别

我正在创建一个动态小部件，它可以是空的，也可以是填充的。默认情况下，它应该为空。当

populated={true}

时，我希望需要

totalGross

和

totalNet

值。否则，这两个道具不应该被允许

为此，我尝试使用区分类型（

WidgetBodyProps

）。然而，TypeScript抱怨，因为

totalNet

和

totalGross

是

中必需的道具

键入WidgetBodyProps=
|{isEmpty？：false；totalNet:string；totalGross:string}
|{isEmpty:真；totalNet:从不；totalGross:从不}；
键入WidgetProps=WidgetHeaderProps和WidgetBodyProps；
const小部件=（props:WidgetProps）=>{
const{title=”“，isEmpty=true，totalNet，totalGross}=props；
返回(
{我是空的(
) : (
)}
);
};

如何修复此Typescript错误？

---

通常发生此错误是因为Typescript不相信某些内容不是空的。使用一个命令告诉Typescript，它可以相信您知道自己在做什么，并且不会向它提供空值。另一个选项是确保所讨论的变量被正确设置为空字符串。

一旦你对道具进行了解构，Typescript就会忘记它们曾经是相关的。因此，对一个变量的测试不会区分另一个变量的类型。但是，在您解构props时，您还没有测试它的类型，因此所有变量都是以各种可能的方式键入的

但是，如果您避免分解结构，那么Typescript可以对

道具的类型进行标记。这样，测试一批道具会缩小你期望的道具类型

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

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

为
totalNet
和
totalGross
指定默认值应该可以修复即时错误（即
totalNet=''，totalGross=''
）。然而，我认为
WidgetBodyProps
的方式似乎有点笨拙，尤其是
never
用法。我猜后者是因为你想用护卫来躲避？
type WidgetBodyProps =
    | { isEmpty?: false; totalNet: string; totalGross: string }
    | { isEmpty: true };