CODEWITHSUNDEEP
typescripttypesreact-datepicker
Matheus Salles Blanco
Matheus Salles Blanco

Reputation: 77

Unable to make typescript recognize typing

I am working on this project and we were required to translate all files created from React Javascript to React Typescript, but being a begginer on type annotations, I have had some struggles, especially with 3rd party packages and libs.

I am using ReactDatePicker to get the user inputted date (written or selected) and moment lib to parse it, together with formik in a multi step form, so users can see, edit and create all in one component. In the latest file I have tampered with, typescript complains that the 'string' value I am working with cannot be assigned to 'Date', although I am typing it as Date | string on its interface as I code it.

This is the interface, which is in an external file:

export interface BaseRelationType extends BaseEntity {
  institutional_relation_approval: Date | string | any,
}

And this is the component accessing it:

import {
  getIn, useFormikContext,
} from 'formik';
import DatePicker from 'react-datepicker';
import { FormikStep } from 'components/Stepper/Step';
import DateInput, { DateInputProps } from 'components/DateInput/DateInput';
import { RelationFormType } from 'types/relations';

export interface DateStepProps {
  validationSchema: Object,
  innerRef: boolean,
}

const RelationTypeStep: React.FC<DateStepProps> = ({
   innerRef, validationSchema,
}) => {
  const {
    values, errors, touched, setFieldValue,
  } = useFormikContext<RelationFormType>();

  return (
    <FormikStep>
      <Row>
          <DatePicker
            selected={values.institutional_relation_approval ? Date.parse(values.institutional_relation_approval) : ''}
            placeholderText="DD/MM/YYYY"
            dateFormat="dd/MM/yyyy"
            name="institutional_relation_approval"
            disabled={isView}
            onChange={((date) => {
              setFieldValue('institutional_relation_approval', date);
              console.log(date);
            })}
          />
    </FormikStep>
  );
};

export default RelationTypeStep;

and the error I am getting:

No overload matches this call.
  Overload 1 of 2, '(props: ReactDatePickerProps | Readonly<ReactDatePickerProps>): ReactDatePicker', gave the following error.
    Type 'string | number' is not assignable to type 'Date | null | undefined'.
      Type 'string' is not assignable to type 'Date | null | undefined'.
  Overload 2 of 2, '(props: ReactDatePickerProps, context: any): ReactDatePicker', gave the following error.
    Type 'string | number' is not assignable to type 'Date | null | undefined'.  TS2769

Am I annotating this type correctly? What does this no overload error means?

Upvotes: 0

Views: 410

Answers (1)

Mic Fung
Mic Fung

Reputation: 5692

Not sure which line prompt the error.

From what I see, the selected property should be accepting Date or null only while Date.parse() returns number instead of Date and the else case return an empty string instead of null so the type is incompatible.

selected={
    values.institutional_relation_approval
    ? new Date(values.institutional_relation_approval) // return Date object
    : null // return null if no value provided
}

Upvotes: 2

Related Questions