Блог

Главная - Вопросы по программированию - Возможно ли создать обязательное свойство, необязательное для типа пересечения

Возможно ли создать обязательное свойство, необязательное для типа пересечения

#reactjs #typescript

#reactjs #typescript

Вопрос:

В настоящее время я расширяю средство выбора даты пользовательского интерфейса материала и задавался вопросом, как сделать требуемые реквизиты необязательными (поскольку значения по умолчанию предоставляются родительским компонентом).

Мой текущий код:

 import React, { useState } from "react";
import {
  MuiPickersUtilsProvider,
  DatePicker,
  DatePickerProps as MuiDatePickerProps,
} from "@material-ui/pickers";

type MyDatePickerProps = {
  value?: string | Date;
  onChange?: (
    date: MaterialUiPickersDate,
    value?: string | null | undefined
  ) => void;
};

function MuiDatePicker(props: MuiDatePickerProps): JSX.Element {
  <DatePicker
    value={props.value}
    onChange={props.onChange}
    clearable={props.clearable}
    format={props.format}
    disableFuture={props.disableFuture}
    disablePast={props.disablePast}
    allowKeyboardControl={props.allowKeyboardControl}
    openTo={props.openTo}
    views={props.views}
    className={props.className}
  />;
}

export default function MyDatePicker({
  allowKeyboardControl = true,
  clearable = false,
  disableFuture = false,
  disablePast = false,
  format = "dd.MM.yyyy",
  keyboardInputDatePicker = false,
  label = "keyboard",
  locale = LOCALE_DEFAULT,
  value = new Date(),
  ...rest
}: MuiDatePickerProps amp; MyDatePickerProps) {
  const handleDateChange = (date: MaterialUiPickersDate) => {
    setDateValue(date);
  };
  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils} locale={LOCALE_MAP[locale]}>
      <DatePicker
        allowKeyboardControl={allowKeyboardControl}
        className={className}
        clearable={clearable}
        disableFuture={disableFuture}
        disablePast={disablePast}
        format={format}
        openTo={openTo}
        onChange={handleDateChange}
        value={dateValue}
        views={views}
      />
    </MuiPickersUtilsProvider>
  );
}

Когда я пытаюсь использовать свой компонент (без установки onChange and value , я получаю сообщение об ошибке Type '{}' is missing the following properties from type 'BasePickerProps': value, onChange

Комментарии:

1. не могли бы вы предоставить минимальный воспроизводимый пример?

2. Вы действительно просто ищете что-то вроде Partial<T> ? Или я неправильно понимаю?

3. @jcalz спасибо за предложение, не могу поверить, что я его упустил!

4. Вы также можете использовать Omit<BasePickerProps, keyof MyDatePickerProps>, чтобы удалить реквизиты, которые обрабатываются в другом месте. Вам понадобится это вместо просто частичного<BasePickerProps> в случае, если вы включаете prop с тем же ключом, но другим типом значения.

Ответ №1:

Похоже, вы решили эту проблему, но вот обобщенное решение вашего вопроса. Я сталкиваюсь со случаем, когда я хочу сделать определенные свойства настолько необязательными, что я создал для него псевдоним:

 export type PartialSome<T, U extends keyof T> = Partial<T> amp; Omit<T, U>

Этот сопоставленный тип изменяет тип или интерфейс T таким образом, что любые ключи, назначаемые U, становятся необязательными, в то время как все остальные ключи остаются неизменными (они могут быть необязательными или обязательными).

Partial<T> делает все необязательным, в то время как объединение с Omit<T, U> возвращает все, кроме необязательных ключей, к исходному типу.