Требуется логическое свойство

У меня есть собственный элемент формы, для его типа требуется составной аргумент, при его передаче форма будет формой FormData, если нет, то это будет форма JSON, и я хочу сделать это следующим образом:

<CustomForm<DataFields> ...arguments>  (JSON FORM)
    ...
</CustomForm>

<CustomForm<DataFields> multipart ...arguments>  (MULTIPART FORM)
    ...
</CustomForm>

но на самом деле, когда я делаю первый (форма JSON), появляется ошибка ввода, вместо этого мне нужно сделать это:

<CustomForm<DataFields> multipart = {false} ...arguments>  (JSON FORM)
    ...
</CustomForm>

Это ошибка, которую я получаю:

Type '{ children: Element[]; onSubmit: () => void; }' is not assignable to type 'IntrinsicAttributes & CustomFormProps<FieldValues>'.
  Property 'multipart' is missing in type '{ children: Element[]; onSubmit: () => void; }' but required in type '{ multipart: false | void | null | undefined; onSubmit: (data: FieldValues) => void; }'.ts(2322)
form.ts(12, 2): 'multipart' is declared here.

Сначала мой тип выглядел так:

type CustomFormProps<T extends any> = {
    children?: ReactNode | ReactNode[]
    setMethods?: Function
    className?: string
} & ({
    multipart: true
    onSubmit: (data: FormData) => void
} | {
    multipart: false
    onSubmit: (data: T) => void
})

Затем я подумал: «Хорошо, это должно быть потому, что, когда я не передаю никакого значения, свойство multipart получает «неопределенное»», поэтому я изменил его на это:

type CustomFormProps<T extends any> = {
    children?: ReactNode | ReactNode[]
    setMethods?: Function
    className?: string
} & ({
    multipart: true
    onSubmit: (data: FormData) => void
} | {
    multipart: false | undefined | null | void
    onSubmit: (data: T) => void
})

Но это тоже не сработало. Что мне нужно сделать, чтобы это исправить?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
50
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Для второй части вашего дискриминируемого объединения вам нужно сделать multipart необязательным свойством.

| {
  multipart?: false;
  onSubmit: (data: T) => void;
}

Вот пример codeandbox, где компилятор Typescript определяет тип onSubmit для <CustomForm/> с опущенным реквизитом.

Большое спасибо! Не знаю, как я не подумал об этом раньше, спасибо!

João Pedro 09.08.2024 12:42

Другие вопросы по теме