如何用 React 正确编写条件类型？

Question

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

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} 
  }
}

但是它说

Property 'to' does not exist on type 'ButtonProps'. Property 'to' does not exist on type '{ onClick: () => void; }'.ts(2339`

如何使用 OR 格式化文字形状，以便在选择其中一个时，另一个将被丢弃。没有选项，选择的道具将是必需的。

Answer 1

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

第二件事是类型保护，在下面的代码片段中 isButtonWithTo 就是这样。它将类型缩小为联合中的选项之一。注意 is 关键字，它表示函数计算结果为真意味着什么，在这种情况下我是说如果 isButtonWithTo 将 return 为真，那么参数的类型为 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
  }
}

如何用 React 正确编写条件类型？

How to write conditional types properly with react?

typescript

reactjs

react-typescript