Сборка Typescript терпит неудачу, когда я пытаюсь создать пользовательскую форму antd

Question

У меня есть компонент реагирования с именем BasicDelete, и я пытаюсь создать форму , используя antd . Но когда я создаю приложение для машинописи, я получаю сообщение об ошибке.

// This is how I am trying to create the form component

const BasicDeleteForm = Form.create({
    mapPropsToFields(props: {
        workFlowData: {
        reason: string;
        };
    }) {
        return {
        reason: Form.createFormField({
            value: props.workFlowData.reason
        })
        };
    }
})(BasicDelete);

Ошибка говорит:

SyntaxError: Unexpected token, expected ";" (1:22)
> 1 |     TS2345: Argument of type '{ mapPropsToFields(props: { workFlowData: { reason: string; }; }): { reason: any; }; }' is not assignable to parameter of type 'FormCreateOption<FormComponentProps<any>>'.
    |                      ^
  2 |     Types of property 'mapPropsToFields' are incompatible.
  3 |         Type '(props: { workFlowData: { reason: string; }; }) => { reason: any; }' is not assignable to type '(props: FormComponentProps<any>) => void'.
  4 |         Types of parameters 'props' and 'props' are incompatible.

Почему возникает эта ошибка? Как я мог правильно предотвратить эту ошибку?

Answer 1

Вы должны указать типы в TypeScript:

import { Form } from 'antd';
import { FormComponentProps } from 'antd/lib/form';

interface UserFormProps extends FormComponentProps {
  age: number;
  name: string;
}

class UserForm extends React.Component<UserFormProps, any> {
  // ...
}

const App = Form.create<UserFormProps>({
  // ...
})(UserForm);

Кроме того, у вас есть раздел «Использование с Typescript» для каждого компонента.