TS2339：“IntrinsicAttributes & IntrinsicClassAttributes<FormInstance<{}、Partial<ConfigProps<{}、{}>>>> & ...”类型不存在属性答案

【问题标题】：TS2339: Property does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<FormInstance<{}, Partial<ConfigProps<{}, {}>>>> & ...'TS2339：“IntrinsicAttributes & IntrinsicClassAttributes<FormInstance<{}、Partial<ConfigProps<{}、{}>>>> & ...”类型不存在属性
【发布时间】：2018-01-03 08:21:06
【问题描述】：

我是 typescript 和 redux 的新手，我正在尝试使用 redux-form 中的 SimpleForm 示例。

我有以下表单组件

import * as React from 'react';
import {Field, reduxForm} from 'redux-form';

class SimpleForm extends React.Component<any, any> {

public render() {

    const { handleSubmit, doCancel } = this.props;

    return (
        <div>
            <h1>Simple Form</h1>

            <form onSubmit={handleSubmit}>
                <div>

                <label htmlFor="firstName">First Name</label>
                <Field name="firstName" component="input" type="text" />

                <label htmlFor="lastName">Last Name</label>
                <Field name="lastName" component="input" type="text" />

                </div>
                <div>
                    <button type="button" onClick={doCancel}>Cancel</button>
                    <button type="submit">Submit</button>
                </div>


            </form>

        </div>
)};

}
export default reduxForm({ form: "simpleForm" })(SimpleForm);

我使用该组件使用

return (
        <div>
            <SimpleForm onSubmit={this.handleSubmit} doCancel={this.doCancel} />

        </div>
    );`

这给了我以下错误

    TS2339: Property 'doCancel' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<FormInstance<{}, Partial<ConfigProps<{}, {}>>>> & ...'.

如果我删除 doCancel 属性，表单呈现正常，但显然取消按钮不起作用。

我在这里做错了什么？

【问题讨论】：

您找到了任何解决方案？

标签： typescript redux-form

【解决方案1】：

您需要在表单中添加一些类型

import { reduxForm, InjectedFormProps } from 'redux-form';

interface Props {
    doCancel(): 
}

class SimpleForm extends React.Component<InjectedFormProps<any, Props> & Props> {
    ....
}

export default reduxForm<any, Props>({ form: "simpleForm" })(SimpleForm);

附带说明，redux-form 类型的学习曲线陡峭，关于如何应用它们的文档很少。

我发现最好的资源是阅读typings tests

【讨论】：