如何使用TypeScript根据另一个属性将React组件的两个属性设置为可选属性？

Question

我想知道是否可以根据TypeScript中的另一个属性将两个属性设置为可选属性，例如：

如果message undefined我希望a和b是必需的；如果message not undefined我希望a和b是可选的。

如何执行此条件？

type Props = Readonly<{
  message?: React.ReactNode
  a: React.ReactNode
  b: React.ReactNode
}>

const Component = ({ message, a, b}: Props) => <div >

Answer 1

您可以使用联合类型来实现此效果：

type Props = Readonly<{
    message?: undefined
    a: string
    b: string
} | {
    message: string
    a?: string
    b?: string
}>

const Component = ({ message, a, b}: Props) => <div />;

let c = <Component message="" /> //ok 
let c2 = <Component a="" b="" /> //ok
let c3 = <Component message="" b="" /> //ok 
let c4 = <Component /> //error as expected