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

我想知道是否可以根据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 >

最佳答案

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

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