Pesquisa de site

javascript - Erro do Typescript usando react-daterange-picker "Nenhuma sobrecarga corresponde a esta chamada."

Quando tento usar react-daterange-picker no meu aplicativo React TypeScript, recebo o erro

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 | }

Meu código é baseado no exemplo oficial no repositório do pacote.

Por que há um erro de Typescript aqui, e como podemos corrigi-lo?

Código 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}
        />
    )
}

Resposta #1

Bem, a única linha que você mudou do exemplo foi a importação.

import DateRangePicker from 'react-daterange-picker';

Esta linha não importa o módulo que você vinculou em sua pergunta. Isso importa react-daterange-picker, mas você vinculou @wojtekmaj/react-daterange-picker. São dois módulos completamente diferentes.

Em vez disso, instale @wojtekmaj/react-daterange-picker e seu pacote de tipos @types/wojtekmaj__react-datetimerange-picker. Então ele deve funcionar como você espera.

Resposta #2

mude sua linha de importação

import DateRangePicker from 'react-daterange-picker';

para

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

Se o pacote não estiver instalado então:

npm install @wojtekmaj/react-daterange-picker

Espero que isso te ajude. Obrigado.

Artigos relacionados