typescript и тип возвращения в зависимости от свойства

Question

interface DatePockerProps {
  value: Date | Date[];
  onChange: (value: Date | Date[]) => void;
  isRange: booleam
}

const DatePicker = ({
  value,
  onChange,
  isRange,
}: DatePockerProps) => {
return (
    <DateField
      value={value ? value : ""}
      type={isRange ? "date-range" : "date"}
      onChange={date => {
        onChange(date);
      }}
    />
  );
}

 <DatePicker
          value={value}
          onChange={(date: Date[]) => date}
          idRange
        />
        
         <DatePicker
          value={value}
          onChange={(date: Date) => date}
        />

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Всем привет. У меня в приложении есть компонент, который отвечает за вывод даты. Ему мы можем передать функцию, которая в зависимости от другого передаваемого свойства, назовем его isRange, будет запускаться во время события onChange, отличие составляет в том, что если isRange=true, то данная функция должна принимать массив дат, а если false, то одну дату.

Проблема состоит в том, при использовании данного компонента, typescript выдает ошибку, что данная функция принимает Date | Date[], а передаваемая функция работает только c Date(например). И вот как подсказать typescript(у), что все хорошо, что значение типов зависит от другого передаваемого свойства?

На примере постарался показать как он выглядит. И ошибка в typescript заключается в том, что без разницы, добавляем в компонент "isRange" или нет, typescript говорит о том, что ожидаемое значение даты это Date | Date[], а функция которую мы передаем, работает только с одним типом

Answer 1

Можно поступить следующим образом - так как в компонент передаются функции с разными типами, то описать отдельно типы этих функций и в самом компоненте указать, что можно передавать оба этих типа:

type ChangeType1 = (value: Date) => void;
type ChangeType2 = (value: Date[]) => void;

interface DatePockerProps {
  value: Date | Date[];
  onChange: ChangeType1 | ChangeType2;
  isRange?: boolean;
}

БЛОГ НА HUSL

typescript и тип возвращения в зависимости от свойства

Ответы (1 шт):