reactjs - Ant Design onFinish-Funktion mit TypeScript; Typ '(values: FormData) => void' ist nicht zuweisbar zu Typ '(values: unknown) => void'

Ich habe das Interface FormData, das denselben Typ wie die Werte haben soll, die die onFinish-Funktion erhält, aber wenn ich es einfüge

const onFinish = (values: FormData) => {

Ich erhalte den Fehler Type '(values: FormData) => void' is not assignable to type '(values: unknown) => void'. Ich habe versucht, die Daten zu fälschen und dasselbe Objekt zu erstellen, das die onFinish-Funktion erhält, wenn ich das Formular absende:

interface FormData {
    firstName: string;
    lastName: string;
    username: string;
    password: string;
    confirmPassword: string;
}

const obj: FormData = {
    firstName: 'andrija',
    lastName: 'gajic',
    username: 'radojica51',
    password: 'idegas51',
    confirmPassword: 'idegas51'
}

Wenn man es auf diese Weise macht, tritt kein Fehler auf, obwohl es dieselben Daten sind, die das Formular erhält

import axios from 'axios';

import { Form, FormCaption } from './Form.style';
import { Input, Button } from 'antd';

interface FormData {
    firstName: string;
    lastName: string;
    username: string;
    password: string;
    confirmPassword: string;
}

const FormComponent = () => {

    // change values type to FormData
    const onFinish = (values: any) => {
        if (values.password !== values.confirmPassword) {
            message.error('Passwords don\'t match!');
            return;
        }
        console.log(values);

        axios.post('http://localhost:5000/register', values);
    }

    return (
        <Form onFinish={onFinish}>
            <FormCaption>Register</FormCaption>

            <FormElement.Item
                label="First name"
                name="firstName"
                rules={[
                    {
                        required: true,
                        message: 'Please enter your first name!',
                    },
                ]}
            >
                <Input />
            </FormElement.Item>

            <FormElement.Item
                label="Last name"
                name="lastName"
                rules={[
                    {
                        required: true,
                        message: 'Please enter your last name!',
                    },
                ]}
            >
                <Input />
            </FormElement.Item>

            <FormElement.Item
                label="Username"
                name="username"
                rules={[
                    {
                        required: true,
                        message: 'Please enter the username!',
                    },
                    {
                        min: 6,
                        max: 20,
                        message: 'Must be between 6 and 20 characters'
                    }
                ]}
            >
                <Input />
            </FormElement.Item>

            <FormElement.Item
                label="Password"
                name="password"
                rules={[
                    {
                        required: true,
                        message: 'Please enter the password!',
                    },
                    {
                        min: 6,
                        max: 20,
                        message: 'Must be between 6 and 20 characters'
                    }
                ]}
            >
                <Input.Password />
            </FormElement.Item>

            <FormElement.Item
                label="Confirm Password"
                name="confirmPassword"
                rules={[
                    {
                        required: true,
                        message: 'Please confirm your password!',
                    },
                    {
                        min: 6,
                        max: 20,
                        message: 'Must be between 6 and 20 characters'
                    }
                ]}
            >
                <Input.Password />
            </FormElement.Item>
   
            <Button htmlType="submit">Register</Button>
        </Form>
  )
}

export default FormComponent;

Antwort #1

Ich persönlich schreibe jsx nicht gerne so, aber Sie können den erwarteten Formular-Typ wie folgt übergeben:

import { Form } from 'antd';
// ...

const FormComponent = () => {
  // ...
  const onFinish = (values: FormData) => {
    // ...
  }
  
  return (
    <Form<FormData> onFinish={onFinish}>
    // ...

Jetzt wird onFinish nicht meckern und die richtigen Typen haben. Quelle

Antwort #2

Sie können den unten stehenden Code verwenden, um damit umzugehen

const onFinish = (values: FormData) => { }; 

und verwende unten in onFinish

<Form onFinish={(values)=> onFinish(values as FormData)}>
    ....
</Form>

Lerne mehr über das Schlüsselwort hier

• Was macht das Schlüsselwort „as“?
• https://www.typescriptlang.org/docs/handbook/advanced-types.html