我有一个具有加载状态的组件,并且我有isLoading属性来确定该组件是否正在加载:
interface CustomImageComponentProps {
isLoading:boolean
src:string
description:string
}
export const MyCustomImage = ({isLoading}:CustomImageComponentProps) => {
return (
<If condition={isLoading} OnTrue={
<Shimmer/>
} OnFalse={//other content}/>
);
});
基本上,如果isLoading是真的,我想让其他的props成为可选的。我如何使用typescript实现这个行为?
3条答案
按热度按时间yjghlzjz1#
这是我如何做的。一个正在加载的布局来 Package 我的一些组件。如果加载为真,组件将不会显示。如果你不喜欢这个,还有另一种方法。你可以使用
style={{display: loading ? 'none' : 'flex'}}
。oyxsuwqo2#
嗨@reza47,
如果我没理解错的话。那么,这是一个让你满意的答案。当然。
如果你想让 prop 成为可选的,只要当isloading为真。那么,你需要像这样多做一点工作。
我不确定。但是,
RequiredProps
覆盖了我的CustomImageComponentProps
代码。我不知道它是如何工作的。如果有人知道这件事。那么,我将感谢任何人的答复。但问题是
CustomImageComponentProps
需要的是加载条件。这并不意味着。不需要隐式导入isLoading组件,就可以在
CustomImageComponentProps
接口的类型Assert中使用它。在TypeScript中,值的类型由保存该值的变量的类型确定,而不是由值本身确定。
vfwfrxfs3#
类型系统术语表示您所需要的是“区分联合”,其中一个值可以是两个或多个类型中的一个,由一个类型的值确定。
现在如果
isLoading
是false,你(和typescript)知道src
和description
是可用的。如果你不检查isLoading,你仍然必须处理未定义src
和description
的可能性,或者至少你必须关闭typescript警告。