How to use Form.create in typescript and antd with function component

Question

I have a form created by Form.create(), but I can't compiler success.

error like:

Argument of type 'FunctionComponent<MyProps>' is not assignable to parameter of type 'ComponentType<{}>'.
  Type 'FunctionComponent<MyProps>' is not assignable to type 'FunctionComponent<{}>'.
    Type '{}' is missing the following properties from type 'MyProps': form, and 2 more

My code is:

import { FormComponentProps } from "antd/lib/form";

interface MyProps extends FormComponentProps {
   form: any;
}

const TableQuery: FunctionComponent<MyProps> = (props: MyProps) => {
 // some code
};

const WrappedTableQuery = Form.create<MyProps>()(TableQuery)

export default WrappedTableQuery;

How can I fix this error.

it can maybe help https://stackoverflow.com/questions/44898248/how-to-use-antd-form-create-in-typescript ? — danywalls, Apr 24 '19 at 08:09

score 3 · Accepted Answer · answered Apr 25 '19 at 08:47

I think this is a bug from the TypeScript definitions in Ant Design:
https://github.com/ant-design/ant-design/issues/16229 (Chinese)
https://github.com/ant-design/ant-design/issues/16095#issuecomment-485709670 (English)

It appeared in version 3.16.4 (published on 2019-04-21), and it is still present in version 3.16.5.
You can use a previous version ("antd": "3.16.3") until the fix is deployed.

How to use Form.create in typescript and antd with function component

1 Answers1