Блог

Вот мой код:

 type DetailsItemEditInput = {
  type: 'text' | 'number';
};

type DetailsItemEditDropdown = {
  type: 'dropdown';
  options: [];
};

type DetailsItemEdit = DetailsItemEditDropdown | DetailsItemEditInput;

export const DetailsItemEdit: FC<DetailsItemEdit> = ({ type, ...props }) => {
  switch (type) {
    case 'text' || 'number':
      return <Input type={type} />;
    case 'dropdown':
      return <Select options={props.options} />;
    default:
      return <div style={{ color: 'red' }}>Wrong type</div>;
  }
};
 

Чего я пытаюсь достичь:

Я хочу, чтобы свойство options было обязательным, только когда тип является «выпадающим». Я подумал, что мог бы сделать это с | помощью . Но, к сожалению, props в этой части, похоже, нет свойства options <Select .../> . Чего мне не хватает?

 Property 'options' does not exist on type '{ children?: ReactNode; } | { options: []; children?: ReactNode; }'.
  Property 'options' does not exist on type '{ children?: ReactNode; }'.ts(2339)
 

TypeScript недостаточно умен, чтобы сузить тип props в вашем коде. Если вы не разрушаете реквизиты, код должен работать.