Redux Form结合TypeScript如何正确定义组件Props？

我太懂你这种找了好久没头绪的感觉了——之前用Flow能直接导入Redux Form的类型，换到TypeScript后官方文档没跟上，旧文档里的propTypes还失效了，看着组件里的any真是浑身难受。别担心，这就给你说清楚怎么优雅地替换掉那个any：

第一步：安装TypeScript类型定义 #

首先，确保你安装了Redux Form的TS类型包（如果是Redux Form v8及以上版本，可能已经自带类型，但旧版本需要手动安装）：

npm install @types/redux-form --save-dev
# 或者用yarn
yarn add @types/redux-form --dev

第二步：导入并定义Props类型 #

和Flow的用法类似，你可以直接从redux-form导入TS对应的类型，比如FormProps（表单组件接收的核心props）和FieldProps（自定义Field组件的props）。

示例：定义表单组件的Props #

假设你的注册表单需要接收一些自定义props，同时还要Redux Form注入的props，你可以这样组合类型：

import React from 'react';
import { reduxForm, FormProps, FieldProps } from 'redux-form';

// 自定义的组件props（比如提交成功后的回调）
interface RegistrationFormCustomProps {
  onSubmitSuccess?: () => void;
}

// 定义表单数据的类型（对应你表单里的字段）
interface RegistrationFormValues {
  username: string;
  email: string;
  password: string;
}

// 结合自定义props和Redux Form的FormProps
type RegistrationFormProps = RegistrationFormCustomProps & FormProps<RegistrationFormValues>;

第三步：替换组件中的any #

现在你可以把组件的any换成刚才定义的RegistrationFormProps，TS会自动推导所有Redux Form注入的props类型（比如handleSubmit、values、errors、pristine等）：

class RegistrationForm extends React.PureComponent<RegistrationFormProps> {
  handleFormSubmit = (values: RegistrationFormValues) => {
    // 这里的values会自动拥有你定义的字段类型，不用再写any！
    console.log('表单提交值:', values);
    // 调用自定义的成功回调
    this.props.onSubmitSuccess?.();
  };

  render() {
    const { handleSubmit, pristine, submitting } = this.props;
    return (
      <form onSubmit={handleSubmit(this.handleFormSubmit)}>
        {/* 如果要自定义Field组件，也可以用FieldProps来定义它的props */}
        <Field
          name="username"
          component={(props: FieldProps<RegistrationFormValues['username']>) => (
            <div>
              <label>用户名</label>
              <input {...props.input} type="text" />
              {props.meta.error && <span className="error">{props.meta.error}</span>}
            </div>
          )}
        />
        {/* 其他字段... */}
        <button type="submit" disabled={pristine || submitting}>
          提交
        </button>
      </form>
    );
  }
}

第四步：用reduxForm包裹组件 #

最后别忘了用reduxForm高阶组件包裹你的组件，表单的配置和类型会自动关联：

export default reduxForm({
  form: 'registration' // 给你的表单一个唯一标识
})(RegistrationForm);

补充说明 #

• 旧文档里的propTypes确实已经过时了，TypeScript环境下完全不需要依赖它，用TS的接口和类型定义就足够安全。
• FormProps的泛型参数是你的表单数据类型，这一步很关键，它能让TS自动校验表单的values、errors等数据的结构，避免类型错误。

内容的提问来源于stack exchange，提问作者Patrickkx