TS2339: Eigenschaft existiert nicht für den Typ 'IntrinsicAttributes & IntrinsicClassAttributes <FormInstance <{}, Teilweise <ConfigProps <{}, {}> >>> & ...'

Question

Ich bin neu in Typoskript und Redux und ich versuche, durch die SimpleForm zu arbeiten Beispiel aus Redux-Form.

Ich habe die folgende Formular Komponente

import * as React from 'react'; 
import {Field, reduxForm} from 'redux-form'; 

class SimpleForm extends React.Component<any, any> { 

public render() { 

    const { handleSubmit, doCancel } = this.props; 

    return (
     <div> 
      <h1>Simple Form</h1> 

      <form onSubmit={handleSubmit}> 
       <div> 

       <label htmlFor="firstName">First Name</label> 
       <Field name="firstName" component="input" type="text" /> 

       <label htmlFor="lastName">Last Name</label> 
       <Field name="lastName" component="input" type="text" /> 

       </div> 
       <div> 
        <button type="button" onClick={doCancel}>Cancel</button> 
        <button type="submit">Submit</button> 
       </div> 


      </form> 

     </div> 
)}; 

} 
export default reduxForm({ form: "simpleForm" })(SimpleForm); 

Und ich verbrauchen die Komponente mit

return (
     <div> 
      <SimpleForm onSubmit={this.handleSubmit} doCancel={this.doCancel} /> 

     </div> 
    );` 

Das gibt mir die folgenden Fehler

TS2339: Property 'doCancel' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<FormInstance<{}, Partial<ConfigProps<{}, {}>>>> & ...'. 

wenn ich die doCancel prop das entfernen form rendert ok, aber offensichtlich ist der Abbrechen-Button nicht funktionsfähig.

Was mache ich hier falsch?

Answer 1

Sie müssen einige Typisierungen zu Ihrem Formular

import { reduxForm, InjectedFormProps } from 'redux-form'; 

interface Props { 
    doCancel(): 
} 

class SimpleForm extends React.Component<InjectedFormProps<any, Props> & Props> { 
    .... 
} 

export default reduxForm<any, Props>({ form: "simpleForm" })(SimpleForm); 

Auf einer seitlichen Anmerkung redux-Form Typisierungen haben eine steile Lernkurve und sehr wenig Dokumentation hinzuzufügen, wie sie angewendet werden sollen.

fand ich die beste Ressource wurde jede Lösung durch die typings tests