reactjs - Parametern 'e' har implicit typen 'any' React TypeScript

Jag försöker implementera detta i en React TypeScript-fil:

export class MainInfo extends Component<IProps>{
  continue = e => {
    e.preventDefault();
    this.props.nextStep();
  };

  render() {
    const { values1, handleChange } = this.props
    return (
      <div>
        <Formik
          validateOnChange={true}
          validationSchema={validationSchema}
          initialValues={{ Title: '', ActivationDate: '', ExpirationDate: '', DirectManager: '', HRBP: '' }}
          onSubmit={(data) => {
            console.log(data)
          }}

Men jag får ett React TypeScript-fel där parametern 'e' implicit har typen 'any'. Hur ska jag åtgärda detta?

Redigera: Jag har dessa i en annan fil som jag använder här som props

nextStep = () => {
    const { step } = this.state;
    this.setState({
      step: step + 1
    });
  };

  // Go back to prev step
  prevStep = () => {
    const { step } = this.state;
    this.setState({
      step: step - 1
    });
  };

  // Handle fields change
  handleChange = input => e => {
    this.setState({ [input]: e.target.value });
  };

Svar #1

När du skriver TypeScript bör du hänvisa till källkoden eller dokumentationen för biblioteket för att veta vilka dess typer är

Till exempel, i Formiks types.tsx, ser vi

handleChange(e: React.ChangeEvent<any>): void;

Vi kan också titta i Reacts typer för att se:

interface ChangeEvent<T = Element> extends SyntheticEvent<T>

Så, något som

handleChange = input => (e: React.ChangeEvent<HTMLInputElement>) => {
  this.setState({ [input]: e.target.value });
};

...kan fungera för dig.

Om din IDE också stöder TypeScript kommer det att hjälpa.

Svar #2

Det är intressant att notera att du inte kommer att se detta fel om du skriver inbyggda händelsehanterare, men varför ser du det då i detta sammanhang?

Anledningen till att du ser det felmeddelandet är på grund av typavledningssystemet i TypeScript och hur det fungerar.

TypeScript försöker alltid lista ut de olika typerna av värden som flödar runt i din applikation och det är vad typinferenssystemet gör.

Låt mig demonstrera med en skärmdump. I skärmdumpen nedan har jag hovrat över onChange och du kommer att märka att TypeScript är 100% medveten om vad den onChange-prop verkligen är, den förstår att det är en prop, den förstår att jag är tvungen att tillhandahålla någon form av callback-funktion till den. Den säger att om jag beslutar mig för att tillhandahålla den funktionen till onChange, kommer den att ha ett första argument som heter event och dess typ kommer att vara React.ChangeEvent<HTMLInputElement>:

Om jag för muspekaren över e inline, märker jag att jag får exakt samma typ:

Men typinferen-systemet tillämpas inte om jag definierar funktionen i förväg. Även om jag definierar funktionen i förväg och skickar ner den till onChange-egenskapen, kommer typinferen inte att tillämpas.

Typinferens är endast definierad inne i JSX när vi definierar callback-funktionen direkt inline.

Så hur fixar man det här? Hur definierar vi onChange i mitt exempel i förväg och samtidigt anger typen på mitt händelseobjekt?

Nåväl, jag kan hovra över onChange som du såg i skärmdumpen ovan och markera och kopiera typen av händelsen som är React.ChangeEvent<HTMLInputElement> och sätta ett kolon efter event och klistra in den typen där.

I mitt exempel skulle det vara:

const EventComponent: React.FC = () => {
  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    console.log(event);
  };

   return (
     <div>
       <input onChange={onChange} />
     </div>
   );
};

Vilket betyder, för att lösa ditt problem, skulle det se ut så här:

export class MainInfo extends Component<IProps>{
  continue = (event: React.ChangeEvent<HTMLInputElement>) => {
    event.preventDefault();
    this.props.nextStep();
  };

Notera att evenemangstypen säger ChangeEvent? Var bara medveten om att det finns andra händelser i React-kod, såsom hover eller drag, som du kanske också vill annotera. Bara något att vara medveten om.

Relaterade artiklar