使用 react-daterange-picker 的打字稿错误“没有重载匹配此调用。”答案

【问题标题】：Typescript Error using react-daterange-picker "No overload matches this call."使用 react-daterange-picker 的打字稿错误“没有重载匹配此调用。”
【发布时间】：2021-05-19 19:42:20
【问题描述】：

当我尝试在我的 React Typescript 应用程序中使用 react-daterange-picker 时，我得到了错误

No overload matches this call.
  Overload 1 of 2, '(props: RangeProps<DateRangePicker> | SingleProps<DateRangePicker> | Readonly<RangeProps<DateRangePicker>> | Readonly<...>): DateRangePicker', gave the following error.
    Type 'Date[]' is not assignable to type 'Moment | (MomentRange & typeof import("/Users/nyxynyx/test/node_modules/moment/ts3.1-typings/moment.d.ts")) | DateRange | undefined'.
      Type 'Date[]' is missing the following properties from type 'Moment': format, startOf, endOf, add, and 80 more.
  Overload 2 of 2, '(props: Props<DateRangePicker>, context: any): DateRangePicker', gave the following error.
    Type 'Date[]' is not assignable to type 'Moment | (MomentRange & typeof import("/Users/nyxynyx/test/node_modules/moment/ts3.1-typings/moment.d.ts")) | DateRange | undefined'.
      Type 'Date[]' is not assignable to type 'Moment'.  TS2769

    20 |         <DateRangePicker 
    21 |             onChange={onChange}
  > 22 |             value={value}
       |             ^
    23 |         />
    24 |     )
    25 | }

我的代码基于official example in the package repo。

为什么这里会出现 Typescript 错误，我们该如何解决？

React Typescript 代码：

import React, { useState } from 'react';
import DateRangePicker from 'react-daterange-picker';

export function Foo(): JSX.Element {

    const [ value, onChange ] = useState([new Date(), new Date()]);

    return (
        <DateRangePicker 
            onChange={onChange}
            value={value}
        />
    )
}

【问题讨论】：

标签： javascript reactjs typescript react-calendar react-daterange-picker

【解决方案1】：

嗯，您从示例中更改的一行是导入。

import DateRangePicker from 'react-daterange-picker';

此行不会导入您在问题中链接到的模块。导入react-daterange-picker，但您链接到@wojtekmaj/react-daterange-picker。这是两个完全不同的模块。

而是安装@wojtekmaj/react-daterange-picker 和它的类型包@types/wojtekmaj__react-datetimerange-picker。然后它应该像你期望的那样工作。

【讨论】：

【解决方案2】：

更改您的导入行

import DateRangePicker from 'react-daterange-picker';

到

import DateRangePicker from '@wojtekmaj/react-daterange-picker';

如果未安装软件包，则：

npm install @wojtekmaj/react-daterange-picker

希望这会对您有所帮助。谢谢。

【讨论】：