Fix form types and add type test

[yesmeck]

Refer to https://github.com/DefinitelyTyped/DefinitelyTyped/blob/913d4de374d9950d60d59b164ee54988142bad6c/types/react-redux/index.d.ts#L38

[mention-bot]

@yesmeck, thanks for your PR! By analyzing the history of the files in this pull request, we identified @simaQ, @afc163 and @benjycui to be potential reviewers.

[afc163]

What is the benefits?

[yesmeck]

@afc163 You can try compile the test file using the old type.

[afc163]

components/form/__tests__/type.test.tsx(38,24): error TS2339: Property 'name' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<{ childr...'.

Just for record.

[afc163]

rebase

[codecov]

Codecov Report

Merging #7245 into master will increase coverage by 2.55%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master    #7245      +/-   ##
==========================================
+ Coverage   85.73%   88.29%   +2.55%     
==========================================
  Files         231      231              
  Lines        4893     4946      +53     
  Branches     1332     1412      +80     
==========================================
+ Hits         4195     4367     +172     
+ Misses        698      579     -119

Impacted Files	Coverage Δ
components/form/Form.tsx	89.09% <ø> (ø)	⬆️
components/table/Table.tsx	94.13% <0%> (+0.9%)	⬆️
components/transfer/list.tsx	91.11% <0%> (+1.11%)	⬆️
components/table/SelectionCheckboxAll.tsx	93.82% <0%> (+1.23%)	⬆️
components/back-top/index.tsx	94.28% <0%> (+1.42%)	⬆️
components/tabs/index.tsx	95.38% <0%> (+1.53%)	⬆️
components/radio/group.tsx	93.22% <0%> (+1.69%)	⬆️
components/date-picker/createPicker.tsx	87.27% <0%> (+1.81%)	⬆️
components/alert/index.tsx	82.35% <0%> (+1.96%)	⬆️
components/breadcrumb/Breadcrumb.tsx	86.66% <0%> (+2.22%)	⬆️
... and 26 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f089d18...0fe8e7b. Read the comment docs.

[yesmeck]

😳这个覆盖率。。。

[afc163]

没道理。

[mitchelldemler]

This is a breaking change for me.

I am using types/react@15.0.24 (upgrading react types breaks my build when importing antd components)

How I am currently implementing FormComponentProps:

import * as React from 'react';
import { Form } from 'antd';
import { FormComponentProps } from 'antd/lib/form/Form';

export interface IOwnProps {
    prop1: string;
    prop2: string;
}

class LoginFormComponent extends React.Component<IOwnProps & FormComponentProps, {}> {
    public render() {
        return (
            <Form />
        );
    }
}

export default Form.create<IOwnProps>({})(LoginFormComponent);

(I'm sorry I don't know how to enforce types in Codepen)

When upgrading to antd 2.12.7 I get 'Property 'form' is missing in type...' when consuming the Form:

<LoginForm prop1="aaaa" prop2="bbbb" />

[yesmeck]

@miaojiuchen Try interface IOwnProps extends FormComponentProps.

[mitchelldemler]

Same error. I will try upgrade my project to use latest types. Can you confirm what version of react types you are using?

[yesmeck]

Oh. export default Form.create<IOwnProps>({})(LoginFormComponent);

You don't need pass IOwnProps to Form.create.

[mitchelldemler]

No luck :(

[yesmeck]

I'm using @types/react@15.6.1

[rdvojmoc]

I get same error as @mitchelldemler when trying to consume my form:

import { Row, Col, Spin, Card, Badge, Button, Input, Form } from 'antd'
import { FormComponentProps } from 'antd/lib/form';

interface IContainerProps extends FormComponentProps {
    container: ContainerViewModel;
}
 class ContainerDetail extends React.Component<IContainerProps, any> {
    public render() {
        return <Card>
        <Spin >
            <Form layout="horizontal">
                <Form.Item label="Name:">
                     <Input defaultValue={this.props.container.Name} />
                </Form.Item>
                <Form.Item label="Description:">
                    {this.props.form.getFieldDecorator('', { initialValue: this.props.container.Description })}
                    (
                        <Input />
                    )
                </Form.Item>
            </Form>
        </Spin>
    </Card>;
    }
}

export default Form.create<IContainerProps>()(ContainerDetail);

When I try to consume ContainerDetail form:
<ContainerDetail container={this.props.container}/>;

Error thrown:
Property 'form' is missing in type '{ container: ContainerViewModel; }'.

Libraries used:

"typescript": "2.4.1",
"antd": "^3.1.0",
"@types/react": "16.0.34"
"react": "16.2.0",