typescript - Vad är typsignaturen för MUI DatePicker `onChange`-händelsen?

Jag har en MUI DatePicker med en MomentAdapter:

import *, {useState} as React from 'react';
import TextField from '@mui/material/TextField';
import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';

import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { Moment } from 'moment';

function App() {

  const [value, setValue] = useState<Moment | null>();

  return (
    <LocalizationProvider dateAdapter={AdapterMoment}>
      <DatePicker
        value={value}
        onChange={(date: Moment | null) => {
          setValue(date);
          console.log(date);
        }}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  )
}

Värdet av date är tydligt ett Moment-objekt, vilket jag kan se genom att inspektera det i konsolen:

Men Typescript klagar på att det förväntar sig ett Date-objekt här.

(För att göra saken ännu mer förvirrande får jag inkonsekventa resultat när jag försöker detta, som är en förgrening från MUI-dokumentationen på en StackBlitz, där värdet verkar vara ett datum. Det är svårt att se där eftersom konsolen inte skriver ut objekt särskilt användbart.)

Vad ska typdeklarationen för onChange vara här?

Svar #1

Egenskapen onChange definieras i UsePickerValueBaseProps<TValue, TError>-gränssnittet, som:

onChange?: (value: TValue, context: PickerChangeHandlerContext<TError>) => void;

Den generiska parametern TValue kommer från DatePicker själv, så du kan specificera den i komponenten och onChange-metoden kommer att ha korrekt typning:

<DatePicker<Moment> 
  onChange={(date: Moment | null) => {
    setValue(date);
    console.log(date);
  }}
/>

Du får ett fel om du inte definierar det, eftersom TValue har en standardtyp av Date.

Svar #2

Värdet av date är tydligt ett Moment-objekt, vilket jag kan se genom att inspektera det i konsolen

Tänk på att du själv anger värdet till ett Moment-objekt. Den typ som används internt av komponenten kanske inte matchar den typ du skickar till den. Ditt console.log(value)-uttryck kontrollerar också typen av din value-variabel, och inte det nya date som komponenten skickar in.

Detta är ungefär hur din onChange-metod bör se ut:

onChange={(date: Date | null) => {
          setValue(date);
          console.log(`${date} has type ${typeof date}`);
        }}

Om du ändrar det till detta, se om detta ger dig en Date-typ nu.

Relaterade artiklar