javascript - Redux skjema egenskaper & typescript

Har lett i årevis, fant ikke noe som var verdt det, skjønt.

Når jeg jobbet med flyt, kunne jeg enkelt:

import { type FieldProps, FormProps } from 'redux-form';

Finnes det en lignende (og så enkel) måte å riktig sette props til redux-skjema i Typescript på?

Dokumentasjonen sier ingenting om TypeScript, det er bare en side for Flow-typinger.

Jeg oppdaget imidlertid at jeg kan importere noe som propTypes fra redux-form:

import { reduxForm, propTypes } from 'redux-form'

Men - redux-form har ingenting som propTypes eksportert, så dokumentasjonen er litt utdatert.

Lenke: https://redux-form.com/7.2.1/docs/api/props.md/

Takk på forhånd for enhver form for hjelp.

tl;dr class RegistrationForm extends React.PureComponent<any> {
                                      what to drop here ^^^^^

Svar #1

Du må installere @types/redux-form-pakken med pakkehåndtereren din. @types/redux-form-pakken inkluderer typedefinisjoner for redux-form-pakken.

Da kan du importere typedefinisjoner fra redux-form, for eksempel InjectedFormProps.

Skjemaet ditt som vil bli pakket med reduxForm() bør ha props som utvider InjectedFormProps<FormData={}, P={}>.

typen reduxForm() er generisk reduxForm<FormData={}, P={}>(...

Se eksemplet:

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

import { IUser } from './index';

interface IProps {
  message: string;
}

class UserForm extends React.Component<InjectedFormProps<IUser, IProps> & IProps> {
  render() {
    const { pristine, submitting, reset, handleSubmit, message } = this.props;
    return (
      <form onSubmit={handleSubmit}>
        <div>{message}</div>
        <div>
          <label>First Name </label>
          <Field
            name="firstName"
            component="input"
            type="text"
            placeholder="First Name"
          />
        </div>
        <div>
          <label>Last Name </label>
          <Field
            name="lastName"
            component="input"
            type="text"
            placeholder="Last Name"
          />
        </div>
        <div>
          <button type="submit" disabled={pristine || submitting}>
            Submit
          </button>
          <button type="button" disabled={pristine || submitting} onClick={reset}>
            Clear Values
          </button>
        </div>
      </form>
    );
  }
}

export default reduxForm<IUser, IProps>({
  form: 'userForm',
})(UserForm);

Kildekoden til @types/redux-form-pakken ligger her. Du kan se typene der og mer kompliserte eksempler i filen redux-form-tests.tsx som brukes til typekontroll.

Relaterte artikler