какой тип реквизита с Typescript, когда я настраиваю элемент управления формы ant-design

Question

мой код компонента формы здесь:

import * as React from 'react';
import { From } from 'antd';
import { FormComponentProps } from 'antd/es/form';
import CustomControl from './CustomControl'

interface IProps extends FormComponentProps {

}

class MyForm extends React.Component<IProps> {
  constructor(props: IProps) {
    super(props);
  }

  public render(): React.ReactNode {
    const { getFieldDecorator } = this.props.form

    return <Form>
      <Form.Item label="custom-control">
        {
          getFieldDecorator('custom-field', {initialValue: 'custome-value'})
          (<CustomControl />)
        }
      </Form.Item>
    </Form>
  }
}

export default Form.create<IProps>()(MyForm);

мой элемент управления формы настройки здесь:

import * as React from 'react';
import { Input } from 'antd';

const { forwardRef, useState } = React;

function CustomControl(props: any) {
    const [value, setValue] = useState(props.value);
    const handleChange = (value: string) => {
        if (props.onChange) {
            setValue(value)
            props.onChange(value)
        }
    }

    return <div>
        <Input value={value} onChange=((e) => handleChange(e.currentTarget.value)) />
    </div>
}
export default forwardRef(CustomControl)

вот это any:

function CustomComponent(props: any) {}

я могуне определите тип этого реквизита, который прошел мимо antd getFieldDecorator, код в antd о getFieldDecorator:

getFieldDecorator<T extends Object = {}>(id: keyof T, options?: GetFieldDecoratorOptions): (node: React.ReactNode) => React.ReactNode;

React.ReactNode явно не для меня.

Так, я могу написать только any здесь, это не достаточно дружелюбно.

Пожалуйста, покажите мне способ оптимизировать это any.

Answer 1

Сценарий 1: необходимые реквизиты

Если CustomControl имеет необходимые реквизиты, вы можете напечатать его следующим образом.

type Props = {
  value: string;
  onChange: Function;
};

function CustomControl(props: Props) { /* code omitted for clarity */ }

Поскольку реквизиты требуются, включайте их при передаче от CustomControl до getFieldDecorator.

<Form.Item label="custom-control">
  {getFieldDecorator("custom-field", {
    initialValue: "custome-value"
  })(<CustomControl value="foo" onChange={() => { /* do something */ }} />)}
</Form.Item>

Сценарий 2: дополнительные реквизиты

Если CustomControl имеет дополнительные реквизиты, вы можете сделать их опциональными ?, например так.

type Props = {
  value?: string;
  onChange?: Function;
};

function CustomControl(props: Props) { /* code omitted for clarity */ }

Поскольку реквизиты теперь являются необязательными, больше нет необходимости включать их при передаче CustomControl в getFieldDecorator.

<Form.Item label="custom-control">
  {getFieldDecorator("custom-field", {
    initialValue: "custome-value"
  })(<CustomControl />)}
</Form.Item>