typescript - 如何在使用 reduxForm 包装的组件内使用 FormInstance 道具（提交）

Question

在我们的项目中，由于我们使用自定义中间件submit而不是handleSubmit（它不会触发SUBMIT动作），例如

<Form onSubmit={submitting ? null : submit} />
  // instead of 
<Form onSubmit={submitting ? null : handleSubmit} />

我们刚刚开始迁移到TypeScript，问题是当我们尝试使用这个 prop 时，TS 会抱怨它——但是 prop 被注入并在 Component 中可见......

type TestFormProps = { foo?: string};
type InjectedPropsTest = InjectedFormProps<FormData, TestFormProps>

class TestFormComponent extends React.Component<TestFormProps & InjectedPropsTest> {
    render() {
        // this.props.submit doesn't compile with following error:
        // Property 'submit' does not exist on type 
        // 'Readonly<TestFormProps & InjectedPropsTest> & Readonly<{ children?: ReactNode; }>'.
        // ts(2339)

        console.log('submit', this.props.submit());
        
        // doesn't compile but without TS code works fine because `submit` prop exists
        return <Form onSubmit={submitting ? null : this.props.submit} />
    }
}

有谁知道如何让TS满意？我做错了什么还是内部问题？我发现这submit是FormInstance的一部分，但不知道如何正确使用它......

可行的解决方案，但我认为它们只是解决方法：

1. 修改node_modules/@types/redux-form/lib/reduxForm.d.ts并添加submit(): void;到InjectedFormProps
2. 作为自定义道具传递submit，例如<WrappedForm submit={disptach(submit(formName))} />——更多的工作，强制执行不同的组合。

我们使用的软件包：

• "redux-form": "8.3.7",
• "@types/redux-form": "8.3.1",

我将不胜感激任何反馈

标签： typescriptredux-form