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

Question

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

如果 message 是 未定义，我希望需要 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