TypeScript中React DatePicker日期范围onChange的dates类型

当你使用react-datepicker开发日期范围选择功能（给组件传入selectsRange属性开启范围模式）时，onChange回调接收的dates参数可以直接使用库内置导出的类型，不需要手动定义：

• 首先从依赖包中导入对应类型：import type { DateRange } from 'react-datepicker'
• 该DateRange类型本质是长度为2的元组，结构为[Date | null, Date | null]，元组第一位对应选中的范围起始日期，第二位对应范围结束日期；未完成选择、清空选择时对应位置的值为null。

你可以直接参考下面的标准写法，组件状态和事件入参都复用这个类型即可，不会出现类型校验错误：

import { useState } from 'react';
import DatePicker, { type DateRange } from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

export default function DateRangeSelector() {
  const [range, setRange] = useState<DateRange>([null, null]);

  return (
    <DatePicker
      selectsRange
      startDate={range[0]}
      endDate={range[1]}
      selected={range[0]}
      onChange={(dates: DateRange) => {
        setRange(dates);
        const [startDate, endDate] = dates;
        // 后续业务逻辑直接使用解构出来的起止日期即可
      }}
    />
  );
}

注意不要手动把类型定义成[Date, Date]这类非空结构，否则在用户只选了起始日期还没选结束日期、或者清空选择的场景下，TypeScript会报类型不匹配的错误，直接使用库导出的DateRange类型会和当前安装的组件版本结构完全对齐，不需要手动维护类型结构。

内容的提问来源于stack exchange，提问作者Saalim Shadman