typescript - Bagaimana cara menyelesaikan error TS2345 dengan redux-form?


Saya telah menemui TS2345. Kami menggunakan redux-form, typescript, dan connect(redux).

Ini adalah komponen kontainer kami.

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { formValueSelector } from 'redux-form';
import SignForm from '@components/SignForm';
import * as AuthActions from '@store/auth/actions';

const selector =  formValueSelector('signForm');

const mapStateToProps = (state: any) => {
  const username = selector(state, 'username');
  const password = selector(state, 'password');
  return {
    signForm: {
      username,
      password,
    }
  }
}

function mapDispatchToProps(dispatch: any) {
  return {
    AuthActions: bindActionCreators(AuthActions, dispatch),
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(SignForm);

Dan ini adalah komponen presentasional.

import React, { Component } from 'react';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import { Field, InjectedFormProps, reduxForm } from 'redux-form';
import * as Validator from '@utils/Validator'

export interface SignFormProps extends InjectedFormProps {
  AuthActions: any,
  signForm: any,
}

class SignForm extends Component<SignFormProps> {
  labels = {
    accountName: 'account name',
    password: 'password',
    signIn: 'signin',
  };

  handleSubmit = () => {
    this.props.AuthActions.loginRequested(
      this.props.signForm.username,
      this.props.signForm.password
    );
  }

  render() {

    return (
      <form>
        <div>
          <Field
            name="username"
            component={TextField}
            hinttext={this.labels.accountName}
            floatinglabeltext={this.labels.accountName}
            validate={[Validator.required]}
            ref="username"
          />
        </div>
        <div>
          <Field
            name="password"
            component={TextField}
            type="password"
            hinttext={this.labels.password}
            floatinglabeltext={this.labels.password}
            ref="pasword"
          />
        </div>
        <div style={this.styles.buttonStyle}>
          <Button type="button" onClick={() => this.handleSubmit()} >{this.labels.signIn}</Button>
          <Button type="button" onClick={() => this.handleReset()}>{this.labels.clear}</Button>
        </div>
      </form>
    );
  }
}

export default reduxForm<SignFormProps>({form: 'signForm'})(SignForm);

akhirnya dari kode-kode di atas, kita mendapat error...

TS2345: Argument of type 'typeof SignForm' is not assignable to parameter of type 'ComponentType<InjectedFormProps<{}, {}, string>>'.
  Type 'typeof SignForm' is not assignable to type 'ComponentClass<InjectedFormProps<{}, {}, string>, any>'.
    Types of parameters 'props' and 'props' are incompatible.
      Type 'InjectedFormProps<{}, {}, string>' is missing the following properties from type 'Readonly<SignFormProps>': AuthActions, signForm

Dulu kami menempatkan fungsi reduxForm sebelum connect(). Itu memang berhasil pada waktu itu.

Setelah menempatkan reduxForm() setelah connect(), mengalami kesalahan ini...

Apakah kamu tahu cara menyelesaikan ini?