从 Ant Design 导入 RangeValue 类型

Question

正在根据Ant Design的文档进行更新，以将 Moment.js 替换为date-fns，该文档似乎运行良好。DatePicker

主要建议创建以下内容：

import dateFnsGenerateConfig from 'rc-picker/lib/generate/dateFns'
import generatePicker from 'antd/es/date-picker/generatePicker'

const DatePicker = generatePicker<Date>(dateFnsGenerateConfig)

然后使用如下组件：

<DatePicker.RangePicker
          placeholder={['From', 'To']}
          onChange={range => setRange(range)}
          value={range}
/>

对于上述情况，已使用类型创建了以下状态RangeValue：

const [range, setRange] = useState<RangeValue<Date>>(
   [from, to]
)

该RangeValue类型已导入如下：

import { RangeValue } from 'rc-picker/lib/interface'

// technically:
// import { RangeValue } from '../../../../node_modules/rc-picker/lib/interface'

问题：

我在我们进行类似对话的一个问题中只找到了这条评论。

有没有办法导入RangeValue类型，也许是从 Ant Design 导入？谢谢你！

Answer 1

我很难输入 antd 值。似乎他们没有提供任何简单的选择。最终最终使用了这个：

type RangeValue = Parameters<NonNullable<React.ComponentProps<typeof DatePicker.RangePicker>['onChange']>>[0]

这将提取发送到 onChange 函数的第一个参数的类型。它还可以与其他事件（onClick、onBlur 等）配合使用。您还可以通过增加方括号中的数字来提取其他参数的类型。现在您可以将此类型分配给您的 onChange 处理程序：

const handleOnChange = (dates: RangeValue, formattedDates: string[]) => {
//do something
return dates 
}