React & Typescript - Можно ли предотвратить отправку параметра, если отправляется другой параметр?

Question

Я использую реагирование и машинопись.

Я хочу быть уверенным, что будет отправлен только 1 реквизит из 3. Я определил такие интерфейсы:

interface General {
  prop1?: boolean
  prop2?: boolean
}

interface Option1 extends General {
  prop3: boolean
}

interface Option2 extends General {
  prop4: boolean
}

interface Option3 extends General {
  prop5: boolean
}

type Option1orOtion2orOption3 = Option1 | Option2 | Option3 

Я использую это так:

export default function MyFunc({prop1 = true, prop2 = true, ...props } : Option1orOtion2orOption3 ) {
  return <></>
}

Я хочу получить ошибку, когда пытаюсь это сделать ?, я не хочу, чтобы кто-то пройти оба prop3 и prop4 и prop5.

<MyFunc prop1={true} prop3 prop4 prop5 />

Как я могу это сделать? Возможно ли это?

Заранее спасибо!

Answer 1

Вы пытались использовать интерфейс F C, предоставляемый React? он может работать с:

FC<Option1 | Option2 | Option3>

, но я не совсем уверен, что это здоровый шаблон: /

Возможно, вы захотите создайте три отдельных компонента, даже если он будет немного дублировать код.