Redux形式道具&打字稿

时间:2018-01-22 10:29:26

标签: javascript reactjs typescript redux-form definitelytyped

寻找多年,没有找到任何值得的东西。

当我使用flow时,我可以简单地说:

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

是否有类似(并且那么简单)的方法在typescript中正确设置道具到redux形式?

Docs没有说什么关于打字稿,只有Flow页面的页面。

但是,我发现我可以从redux-form导入类似propTypes的东西:

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

但是 - redux-form没有像导出propTypes那样的内容,因此不推荐使用doc。

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

提前感谢您提供任何帮助。

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

1 个答案:

答案 0 :(得分:7)

您需要在软件包管理器中安装@types/redux-form软件包。 @types/redux-form包中包含redux-form包的类型定义。

然后,您可以从redux-form导入类型定义,例如InjectedFormProps

使用reduxForm()包装的表单应包含InjectedFormProps<FormData = {}, P = {}>扩展的道具。

reduxForm()类型为通用reduxForm<FormData = {}, P = {}>(...

参见示例:

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> {
  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);

Edit Redux Form + Typescript example

@types/redux-form包的源代码位于here。您可以在redux-form-tests.tsx文件中看到那里的类型和更复杂的示例,用于类型检查。