fix: improve form type definition #3638 (#3669)

components/form/Form.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, inject, provide, PropType, computed } from 'vue';
+import { defineComponent, inject, provide, PropType, computed, ExtractPropTypes } from 'vue';
 import PropTypes from '../_util/vue-types';
 import classNames from '../_util/classNames';
 import warning from '../_util/warning';
@@ -43,7 +43,7 @@ export type ValidationRule = {
   trigger?: string;
 };
 
-export const FormProps = {
+export const formProps = {
   layout: PropTypes.oneOf(tuple('horizontal', 'inline', 'vertical')),
   labelCol: { type: Object as PropType<ColProps> },
   wrapperCol: { type: Object as PropType<ColProps> },
@@ -64,6 +64,8 @@ export const FormProps = {
   validateTrigger: { type: [String, Array] as PropType<string | string[]> },
 };
 
+export type FormProps = Partial<ExtractPropTypes<typeof formProps>>;
+
 function isEqualName(name1: NamePath, name2: NamePath) {
   return isEqual(toArray(name1), toArray(name2));
 }
@@ -71,7 +73,7 @@ function isEqualName(name1: NamePath, name2: NamePath) {
 const Form = defineComponent({
   name: 'AForm',
   inheritAttrs: false,
-  props: initDefaultProps(FormProps, {
+  props: initDefaultProps(formProps, {
     layout: 'horizontal',
     hideRequiredMark: false,
     colon: true,

components/form/FormItem.tsx

@@ -1,4 +1,12 @@
-import { inject, provide, PropType, defineComponent, computed, nextTick } from 'vue';
+import {
+  inject,
+  provide,
+  PropType,
+  defineComponent,
+  computed,
+  nextTick,
+  ExtractPropTypes,
+} from 'vue';
 import cloneDeep from 'lodash-es/cloneDeep';
 import PropTypes from '../_util/vue-types';
 import classNames from '../_util/classNames';
@@ -66,7 +74,7 @@ function getPropByPath(obj: any, namePathList: any, strict?: boolean) {
     v: tempObj ? tempObj[keyArr[i]] : undefined,
   };
 }
-export const FormItemProps = {
+export const formItemProps = {
   id: PropTypes.string,
   htmlFor: PropTypes.string,
   prefixCls: PropTypes.string,
@@ -89,12 +97,14 @@ export const FormItemProps = {
   messageVariables: { type: Object as PropType<Record<string, string>> },
 };
 
+export type FormItemProps = Partial<ExtractPropTypes<typeof formItemProps>>;
+
 export default defineComponent({
   name: 'AFormItem',
   mixins: [BaseMixin],
   inheritAttrs: false,
   __ANT_NEW_FORM_ITEM: true,
-  props: FormItemProps,
+  props: formItemProps,
   setup(props) {
     const FormContext = inject('FormContext', {}) as any;
     const fieldName = computed(() => props.name || props.prop);

components/form/index.tsx

@@ -1,7 +1,8 @@
 import { App, Plugin } from 'vue';
 import Form from './Form';
 
-export { FormProps } from './Form';
+export { FormProps, formProps } from './Form';
+export { FormItemProps, formItemProps } from './FormItem';
 
 /* istanbul ignore next */
 Form.install = function(app: App) {