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

如何使用TypeScript将React组件的两个属性设置为可选，具体取决于另一个属性？

1 个答案: