What is the Antd type for form onFinish?

Question

Right now I am using this everywhere in my code:

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const handleCreate = (input: any): void => {
  saveToBackend({
    title: input.title,
    other: input.other,
    // ...
  })
};

<Form onFinish={handleCreate}>
  // ...
</Form>

What is the type for the input I should be using to make things safer? Also, where are the antd types so I can look up what their implementation is like, so I know how to use them in other situations as well?

If the type is actually any, what should I be doing to make this more typesafe?

Answer 1

You can define create an interface for all the fields wrapped inside the form & use it as a type in where you want to use. you can also add type in useForm Hook.

import { Checkbox, Form, Input } from 'antd';
import './style.css';

const { Item } = Form;

interface FormRule {
    name: string;
    isVerified: boolean;
}

export default function App() {
    const [form] = Form.useForm<FormRule>();

    const onFinish = (data: FormRule) => {};

    return (
        <Form
            form={form}
            requiredMark={false}
            layout='vertical'
            // onFinish={(data) => {}} // => Write `data.`. It will show all the keys or Hover on `data` (Shows The Type of data [FormRule] )
            onFinish={onFinish}
        >
            <Item name='name' label='Name'>
                <Input />
            </Item>

            <Item name='isVerified' label='Verified' valuePropName='checked'>
                <Checkbox />
            </Item>
        </Form>
    );
}

If you add type in useForm, you can take advantage of editor intellisense when you set fields values:

form.setFieldsValue({ ... })}