如何在TypeScript项目中为redux-form组件传递自定义props并定义正确类型

解决方案 #

错误的核心原因是你没有正确给InjectedFormProps传递泛型参数，InjectedFormProps支持两个泛型入参：第一个是表单提交值的类型，第二个就是你自定义的外部传入props的类型。

完整修改后代码：

import React from 'react';
import {
  Field,
  reduxForm,
  InjectedFormProps,
  WrappedFieldProps,
  WrappedFieldMetaProps,
} from 'redux-form';
import { Stream } from '../../constants';

// 1. 定义表单字段类型，直接从Stream里pick需要的字段即可
type FormValues = Pick<Stream, 'title' | 'description'>;

// 2. 单独定义你要传入的自定义props
interface CustomFormProps {
  onSubmit: (values: FormValues) => void;
}

interface CustomInputFieldProps {
  label?: string;
}

// 3. 组件props类型用InjectedFormProps，泛型依次传表单值类型、自定义props类型
const StreamForm = ({ handleSubmit, onSubmit }: InjectedFormProps<FormValues, CustomFormProps>) => {

  // 现在values有完整类型校验，不是any了
  const onFormSubmit = (values: FormValues): void => {
    const { title, description } = values;
    onSubmit({ title, description });
  };

  const renderInput = ({ input, label, meta }: WrappedFieldProps & CustomInputFieldProps): JSX.Element => {
    const className = `field ${meta.error && meta.touched ? 'error' : ''}`;
    return (
      <div className={className}>
        <label>{label}</label>
        <input {...input} />
        {renderError(meta)}
      </div>
    );
  };

  const renderError = ({ error, touched }: WrappedFieldMetaProps) => {
    if (touched && error) {
      return (
        <div className="ui error message">
          <div className="header">{error}</div>
        </div>
      );
    }
  };

  return (
    <form onSubmit={handleSubmit(onFormSubmit)} className="ui form error">
      <Field
        name="title"
        component={renderInput}
        label="Enter Title"
      />
      <Field
        name="description"
        component={renderInput}
        label="Enter Description"
      />
      <button className="ui button primary">Submit</button>
    </form>
  );
};

// validate函数现在也有类型校验，formValues不再是any
const validate = (formValues: FormValues): Partial<FormValues> => {
  const errors: Partial<FormValues> = {};

  if (!formValues.title) {
    errors.title = 'You must enter a title';
  }

  if (!formValues.description) {
    errors.description = 'You must enter a description';
  }

  return errors;
};

export default reduxForm<FormValues, CustomFormProps>({ form: 'streamForm', validate })(StreamForm);

修改后你外部使用这个表单组件的时候，只需要传入onSubmit属性即可，所有属性都会有完整的TypeScript类型校验，不需要再用any。

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