代码之家 › 专栏 › 技术社区 › kevin

如果提供了特定的值,有没有办法使所需的typescript值成为可选的?

typescript reactjs

0

kevin · 技术社区 · 4 年前

我正在尝试向我的一个组件添加某种禁用的功能。现在,所有参数值都是必需的。然而,我很好奇,如果提供了一个值(比如 disabled?: boolean )这样,如果组件被禁用,我可以添加一个三元组来输出组件,也就是说,没有要显示的值,但是如果组件未被禁用,我还可以保留所有需要显示的严格类型`

太长,读不下去了有没有办法让下面的所有参数都有条件地可选?

三元行动:

它的接口

export interface IVideoPlayerController {
  title: string;
  author: string;
  sourceAddress: string;
  description: string;
  timeStamp: ITimeStamp;
}

1 回复 | 直到 4 年前

1

vitoke 4 年前

是的,使用联合类型非常容易:

type IVideoPlayerController =
  | { disabled: true }
  | {
      disabled?: false;
      title: string;
      author: string;
    };

对于这种类型,你要么只通过禁用(true),要么需要其他道具,所以这些道具都是有效的:

<VideoPlayer disabled />
<VideoPlayer title="abc" author="abc" />
<VideoPlayer disabled="false" title="abc" author="abc" />

这些都是无效的:

<VideoPlayer />
<VideoPlayer title="abc" />
<VideoPlayer disabled="false" />

这里有一个 CodeSandbox 有了它,你就可以随心所欲了。

2

0

xpertdev 4 年前

如果您面临的场景中没有强类型组件的值。那就不要把担心的事混在一起。

你应该创建另一个单独的组件,在没有标题作者等的情况下显示NoVideoPlayerContent组件,以及现有组件,在有标题和所有其他道具的情况下显示VideoPlayer内容。

我总是喜欢AHA编程技术而不是干的。这意味着避免仓促的抽象。

另一种方法是在道具中添加未定义的道具,如

title: string |undefined

并检查视频播放器组件。

{Boolean(title) && (
// show content
)}

{!Boolean(title) && (
// show loader or some text
)}