1

因此，我正在尝试编写一种道具类型格式，其中如果选择了一个道具，则将丢弃另一个道具。

type ButtonProps = {
    to: string,
} | {
    onClick: (() => void) 
};

export const BackButton = (props: ButtonProps) => {
  if(props.to != null) {
     //props {to} will be used hence no need for onClick
  }
  else {
    // {onClick} will be used over {to} 
  }
}

但它说

类型“ButtonProps”上不存在属性“to”。类型 '{ onClick: () => void; 上不存在属性 'to' }'.ts(2339`

如何用左右的方式格式化形状时，当一个选择两个都将被丢弃。没有可选项，选择的道具是必需的。

4

1 回答 1

4

我们需要使用类型保护来根据条件适当地缩小类型。为此，我们需要稍微拆分类型，以便在类型保护 + 可读性中进行断言。下面ButtonProps与您的实现相同，但具有明确指定的联合元素。

第二件事是类型保护，在下面的代码片段中isButtonWithTo就是这样。它将类型缩小到联合中的选项之一。注意is关键字，它表示函数评估为true的含义，在这种情况下我是说如果isButtonWithTo将返回true，那么参数有一个类型ButtonWithTo

type ButtonWithTo = {
    to: string,
}
type ButtonWithClick = {
    onClick: (() => void) 
}
// the same type as orginal but with explicit declarations of union elements
type ButtonProps = ButtonWithTo | ButtonWithClick 


const isButtonWithTo = (b: ButtonProps): b is ButtonWithTo  => 'to' in b // type guard

export const BackButton = (props: ButtonProps) => {
  if(isButtonWithTo(props)) {
     props // props have type ButtonWithTo
  } else {
    props // props have type ButtonWithClick
  }
}
于 2019-11-27T11:35:32.987 回答