React Typescript中的依赖道具

67 阅读1分钟

从属道具是指只有在另一个道具有特定值时才应设置的道具。

在下面的例子中,我们可以看到一个用例(点击 Open Sandbox来查看代码)。

这里我们有同一个通用卡的两个选项:

  • Card1 -只有两个道具:title,description
  • 卡2--只有两个道具:title,footer

为了在编写通用组件时充分使用typescript的力量,我们需要给typescript提供我们可以接受的具体选项。

我们可能认为把Card1 | Card2 传给Props 类型就足够了,但是当我们这样做的时候,typescript会给我们显示以下错误。
Property 'description' does not exist on type 'ICardBase & (ICard1 | ICard2)'

Property 'footer' does not exist on type 'ICardBase & (ICard1 | ICard2)'

这是因为我们只能有一个或另一个,所以如果我们目前正在渲染Card1 ,那么我们就不会有footer 这个道具,反之亦然,当我们渲染Card2 ,就不会有description 这个道具。

为了解决这个问题,我们仍然需要将缺失的道具作为neverundefined 也可以,但never 表示该道具永远不会出现)。

我们可以像这样手动操作:

Manual interfaces

但一个更简洁的方法是创建一个实用类型🔥,像这样:

Never type utility

Never util接收每一个道具并使其类型成为never

它允许可扩展的代码。
自然,这个组件开始时很小,直到产品/用户体验团队希望它有点
不同...

Types with the Never util

通过这一切,我们可以获得更好的使用通用组件的体验--当我们不正确地使用它时,typescript会抛出错误,(例如,同时传递footerdescription --这是一个不可能的情况)。

Error shown by typescript to make sure we are using the component correctly

这样可以保护我们这些开发者,避免在两个独立的(但类似的)卡片之间发生混淆。🦾