Как типизировать значение?

Question

[Mark321]

Хочу заюзать календарик с тапйпскриптом, но получаю ошибку, если навести на
setDateRange(update);

ошибка следующая

Argument of type '[Date | null, Date | null]' is not assignable to parameter of type 'SetStateAction<null[]>'.
  Type '[Date | null, Date | null]' is not assignable to type 'null[]'.
    Type 'Date | null' is not assignable to type 'null'.
      Type 'Date' is not assignable to type 'null'

() => {
  const [dateRange, setDateRange] = useState([null, null]);
  const [startDate, endDate] = dateRange;
  return (
    <DatePicker
      selectsRange={true}
      startDate={startDate}
      endDate={endDate}
      onChange={(update) => {
        setDateRange(update);
      }}
      isClearable={true}
    />
  );
};

Как это типизировать?

Comments

[WbICHA]

useState<[Date | null, Date | null]>([null, null]);

Answer 1

[Aetae]

Если ты не указываешь при useState тип стейта руками, то он выводится автоматически.

useState([null, null]); - ts выведет тут тип null[], то есть массив null, про Date он никак догадаться не может. Следует указать явно: useState<Array<Date | null>>([null, null]);

Comments

[WbICHA]

Array<Date | null>

Некорректно, там всегда 2 значения, лучше таплом типизировать.

[Aetae]

WbICHA, лучше. Но и так сойдёт.)
Явному профану за кортежи объяснять мне лень.)

[Mark321]

спасибо за помощь

Answer 2

[mindgrow]

1. Делаешь класс с полями startDate, endDate. Типизируешь их типом Date|null. Так проще чем коллекцией.
2. Типизируешь useState<этот класс>(new..)
3. Проверь что возвращает update, точно ли он там коллекцию возвращает, если да, то либо 1,2 вернуть на коллекцию, либо сделать так чтобы стейт был объектом, а не массивом.

Ругается он у тебя на то, что ты сейчас инициализируешь стейт типом null[]
А возвращаемое значене имеет тип Date|null

Comments

[WbICHA]

1. Делаешь класс с полями startDate, endDate. Типизируешь их типом Date|null. Так проще чем коллекцией.

Зачем и чем лучше?

[mindgrow]

WbICHA, что чем лучше и чего?

[WbICHA]

mindgrow, любого другого решения.