Redux 表单道具和打字稿

Question

找了很多年，没找到任何值得的东西。

当我使用 Flow 时，我可以简单地：

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

是否有类似（并且简单）的方法可以在 typescript 中将 props 正确设置为 redux 形式？

文档没有提到任何关于 typescript 的内容，只有一个用于 Flow 类型的页面。

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

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

但是 - redux-form 没有像 propTypes 那样的输出，所以文档有点被弃用了。

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

在此先感谢您的帮助。

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

Answer 1

您需要使用包管理器安装 @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> & 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);

@types/redux-form 包的源代码位于 here. You can see the types there and more complicated examples in the redux-form-tests.tsx 用于类型检查的文件。

Redux 表单道具和打字稿

Redux form props & typescript

javascript

typescript

definitelytyped

reactjs

redux-form