feat: update ts type

Author: tangjinzhou

components/_util/EventInterface.ts

@@ -4,7 +4,6 @@ export type KeyboardEventHandler = (e: KeyboardEvent) => void;
 export type CompositionEventHandler = (e: CompositionEvent) => void;
 export type ClipboardEventHandler = (e: ClipboardEvent) => void;
 export type ChangeEventHandler = (e: ChangeEvent) => void;
-
 export type ChangeEvent = Event & {
   target: {
     value?: string | undefined;

components/components.ts

@@ -99,7 +99,7 @@ export {
   LayoutContent,
 } from './layout';
 
-export type { ListProps } from './list';
+export type { ListProps, ListItemProps, ListItemMetaProps } from './list';
 export { default as List, ListItem, ListItemMeta } from './list';
 
 export type { MessageArgsProps } from './message';

components/form/Form.tsx

@@ -23,6 +23,7 @@ import type {
   ValidateErrorEntity,
   ValidateOptions,
   Callbacks,
+  ValidateMessages,
 } from './interface';
 import { useInjectSize } from '../_util/hooks/useSize';
 import useConfigInject from '../_util/hooks/useConfigInject';
@@ -60,7 +61,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 & HTMLAttributes> },
   wrapperCol: { type: Object as PropType<ColProps & HTMLAttributes> },
@@ -73,11 +74,14 @@ export const formProps = {
   hideRequiredMark: { type: Boolean, default: undefined },
   model: PropTypes.object,
   rules: { type: Object as PropType<{ [k: string]: ValidationRule[] | ValidationRule }> },
-  validateMessages: PropTypes.object,
+  validateMessages: {
+    type: Object as PropType<ValidateMessages>,
+    default: undefined as ValidateMessages,
+  },
   validateOnRuleChange: { type: Boolean, default: undefined },
   // 提交失败自动滚动到第一个错误字段
   scrollToFirstError: { type: [Boolean, Object] as PropType<boolean | Options> },
-  onSubmit: Function,
+  onSubmit: Function as PropType<(e: Event) => void>,
   name: String,
   validateTrigger: { type: [String, Array] as PropType<string | string[]> },
   size: { type: String as PropType<SizeType> },
@@ -86,9 +90,9 @@ export const formProps = {
   onFinish: { type: Function as PropType<Callbacks['onFinish']> },
   onFinishFailed: { type: Function as PropType<Callbacks['onFinishFailed']> },
   onValidate: { type: Function as PropType<Callbacks['onValidate']> },
-};
+});
 
-export type FormProps = Partial<ExtractPropTypes<typeof formProps>>;
+export type FormProps = Partial<ExtractPropTypes<ReturnType<typeof formProps>>>;
 
 export type FormExpose = {
   resetFields: (name?: NamePath) => void;
@@ -120,14 +124,14 @@ 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,
   }),
   Item: FormItem,
   useForm,
-  emits: ['finishFailed', 'submit', 'finish', 'validate'],
+  // emits: ['finishFailed', 'submit', 'finish', 'validate'],
   setup(props, { emit, slots, expose, attrs }) {
     const size = useInjectSize(props);
     const { prefixCls, direction, form: contextForm } = useConfigInject('form', props);

components/form/FormItem.tsx

@@ -27,7 +27,7 @@ import { toArray } from './utils/typeUtil';
 import { warning } from '../vc-util/warning';
 import find from 'lodash-es/find';
 import { tuple } from '../_util/type';
-import type { InternalNamePath, RuleError, RuleObject, ValidateOptions } from './interface';
+import type { InternalNamePath, Rule, RuleError, RuleObject, ValidateOptions } from './interface';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import { useInjectForm } from './context';
 import FormItemLabel from './FormItemLabel';
@@ -81,7 +81,7 @@ function getPropByPath(obj: any, namePathList: any, strict?: boolean) {
     v: tempObj ? tempObj[keyArr[i]] : undefined,
   };
 }
-export const formItemProps = {
+export const formItemProps = () => ({
   htmlFor: String,
   prefixCls: String,
   label: PropTypes.any,
@@ -94,7 +94,7 @@ export const formItemProps = {
   labelAlign: PropTypes.oneOf(tuple('left', 'right')),
   prop: { type: [String, Number, Array] as PropType<string | number | Array<string | number>> },
   name: { type: [String, Number, Array] as PropType<string | number | Array<string | number>> },
-  rules: PropTypes.oneOfType([Array, Object]),
+  rules: [Array, Object] as PropType<Rule[] | Rule>,
   autoLink: { type: Boolean, default: true },
   required: { type: Boolean, default: undefined },
   validateFirst: { type: Boolean, default: undefined },
@@ -103,9 +103,9 @@ export const formItemProps = {
   messageVariables: { type: Object as PropType<Record<string, string>> },
   hidden: Boolean,
   noStyle: Boolean,
-};
+});
 
-export type FormItemProps = Partial<ExtractPropTypes<typeof formItemProps>>;
+export type FormItemProps = Partial<ExtractPropTypes<ReturnType<typeof formItemProps>>>;
 
 export type FormItemExpose = {
   onFieldBlur: () => void;
@@ -125,7 +125,7 @@ export default defineComponent({
   name: 'AFormItem',
   inheritAttrs: false,
   __ANT_NEW_FORM_ITEM: true,
-  props: formItemProps,
+  props: formItemProps(),
   slots: ['help', 'label', 'extra'],
   setup(props, { slots, attrs, expose }) {
     warning(props.prop === undefined, `\`prop\` is deprecated. Please use \`name\` instead.`);

components/grid/Col.tsx

@@ -34,13 +34,34 @@ export const colProps = () => ({
   offset: [String, Number],
   push: [String, Number],
   pull: [String, Number],
-  xs: { type: [String, Number, Object] as PropType<string | number | ColSize> },
-  sm: { type: [String, Number, Object] as PropType<string | number | ColSize> },
-  md: { type: [String, Number, Object] as PropType<string | number | ColSize> },
-  lg: { type: [String, Number, Object] as PropType<string | number | ColSize> },
-  xl: { type: [String, Number, Object] as PropType<string | number | ColSize> },
-  xxl: { type: [String, Number, Object] as PropType<string | number | ColSize> },
-  xxxl: { type: [String, Number, Object] as PropType<string | number | ColSize> },
+  xs: {
+    type: [String, Number, Object] as PropType<string | number | ColSize>,
+    default: undefined as string | number | ColSize,
+  },
+  sm: {
+    type: [String, Number, Object] as PropType<string | number | ColSize>,
+    default: undefined as string | number | ColSize,
+  },
+  md: {
+    type: [String, Number, Object] as PropType<string | number | ColSize>,
+    default: undefined as string | number | ColSize,
+  },
+  lg: {
+    type: [String, Number, Object] as PropType<string | number | ColSize>,
+    default: undefined as string | number | ColSize,
+  },
+  xl: {
+    type: [String, Number, Object] as PropType<string | number | ColSize>,
+    default: undefined as string | number | ColSize,
+  },
+  xxl: {
+    type: [String, Number, Object] as PropType<string | number | ColSize>,
+    default: undefined as string | number | ColSize,
+  },
+  xxxl: {
+    type: [String, Number, Object] as PropType<string | number | ColSize>,
+    default: undefined as string | number | ColSize,
+  },
   prefixCls: String,
   flex: [String, Number],
 });

components/image/PreviewGroup.tsx

@@ -1,12 +1,11 @@
 import PreviewGroup from '../vc-image/src/PreviewGroup';
 import { computed, defineComponent } from 'vue';
-import PropTypes from '../_util/vue-types';
 import useConfigInject from '../_util/hooks/useConfigInject';
 
 const InternalPreviewGroup = defineComponent({
   name: 'AImagePreviewGroup',
   inheritAttrs: false,
-  props: { previewPrefixCls: PropTypes.string },
+  props: { previewPrefixCls: String },
   setup(props, { attrs, slots }) {
     const { getPrefixCls } = useConfigInject('image', props);
     const prefixCls = computed(() => getPrefixCls('image-preview', props.previewPrefixCls));

components/image/index.tsx

@@ -6,12 +6,13 @@ import useConfigInject from '../_util/hooks/useConfigInject';
 import PreviewGroup from './PreviewGroup';
 
 export type ImageProps = Partial<
-  ExtractPropTypes<typeof imageProps> & Omit<ImgHTMLAttributes, 'placeholder' | 'onClick'>
+  ExtractPropTypes<ReturnType<typeof imageProps>> &
+    Omit<ImgHTMLAttributes, 'placeholder' | 'onClick'>
 >;
 const Image = defineComponent<ImageProps>({
   name: 'AImage',
   inheritAttrs: false,
-  props: imageProps as any,
+  props: imageProps() as any,
   setup(props, { slots, attrs }) {
     const { prefixCls } = useConfigInject('image', props);
     return () => {

components/input-number/index.tsx

@@ -11,8 +11,9 @@ import { cloneElement } from '../_util/vnode';
 import omit from '../_util/omit';
 import PropTypes from '../_util/vue-types';
 import isValidValue from '../_util/isValidValue';
-export const inputNumberProps = {
-  ...baseInputNumberProps,
+const baseProps = baseInputNumberProps();
+export const inputNumberProps = () => ({
+  ...baseProps,
   size: { type: String as PropType<SizeType> },
   bordered: { type: Boolean, default: true },
   placeholder: String,
@@ -22,16 +23,16 @@ export const inputNumberProps = {
   addonBefore: PropTypes.any,
   addonAfter: PropTypes.any,
   prefix: PropTypes.any,
-  'update:value': baseInputNumberProps.onChange,
-};
+  'update:value': baseProps.onChange,
+});
 
-export type InputNumberProps = Partial<ExtractPropTypes<typeof inputNumberProps>>;
+export type InputNumberProps = Partial<ExtractPropTypes<ReturnType<typeof inputNumberProps>>>;
 
 const InputNumber = defineComponent({
   name: 'AInputNumber',
   inheritAttrs: false,
-  props: inputNumberProps,
-  emits: ['focus', 'blur', 'change', 'input', 'update:value'],
+  props: inputNumberProps(),
+  // emits: ['focus', 'blur', 'change', 'input', 'update:value'],
   slots: ['addonBefore', 'addonAfter', 'prefix'],
   setup(props, { emit, expose, attrs, slots }) {
     const formItemContext = useInjectFormItemContext();

components/input-number/src/InputNumber.tsx

@@ -34,7 +34,7 @@ const getDecimalIfValidate = (value: ValueType) => {
   return decimal.isInvalidate() ? null : decimal;
 };
 
-export const inputNumberProps = {
+export const inputNumberProps = () => ({
   /** value will show as string */
   stringMode: { type: Boolean as PropType<boolean> },
 
@@ -76,12 +76,12 @@ export const inputNumberProps = {
   },
   onBlur: { type: Function as PropType<(e: InputEvent) => void> },
   onFocus: { type: Function as PropType<(e: InputEvent) => void> },
-};
+});
 
 export default defineComponent({
   name: 'InnerInputNumber',
   inheritAttrs: false,
-  props: inputNumberProps,
+  props: inputNumberProps(),
   slots: ['upHandler', 'downHandler'],
   setup(props, { attrs, slots, emit, expose }) {
     const inputRef = ref<HTMLInputElement>();

components/input/Input.tsx

@@ -107,9 +107,7 @@ export function triggerFocus(
 export default defineComponent({
   name: 'AInput',
   inheritAttrs: false,
-  props: {
-    ...inputProps,
-  },
+  props: inputProps(),
   setup(props, { slots, attrs, expose, emit }) {
     const inputRef = ref();
     const clearableInputRef = ref();

components/input/Password.tsx

@@ -23,7 +23,7 @@ export default defineComponent({
   mixins: [BaseMixin],
   inheritAttrs: false,
   props: {
-    ...inputProps,
+    ...inputProps(),
     prefixCls: String,
     inputPrefixCls: String,
     action: PropTypes.string.def('click'),

components/input/ResizableTextArea.tsx

@@ -27,7 +27,7 @@ const ResizableTextArea = defineComponent({
   name: 'ResizableTextArea',
   mixins: [BaseMixin],
   inheritAttrs: false,
-  props: textAreaProps,
+  props: textAreaProps(),
   setup(props, { attrs, emit, expose }) {
     let nextFrameActionId: any;
     let resizeFrameId: any;

components/input/Search.tsx

@@ -17,7 +17,7 @@ export default defineComponent({
   name: 'AInputSearch',
   inheritAttrs: false,
   props: {
-    ...inputProps,
+    ...inputProps(),
     inputPrefixCls: String,
     // 不能设置默认值 https://github.com/vueComponent/ant-design-vue/issues/1916
     enterButton: PropTypes.any,

components/input/TextArea.tsx

@@ -47,7 +47,7 @@ function setTriggerValue(
 export default defineComponent({
   name: 'ATextarea',
   inheritAttrs: false,
-  props: textAreaProps,
+  props: textAreaProps(),
   setup(props, { attrs, expose, emit }) {
     const formItemContext = useInjectFormItemContext();
     const stateValue = ref(props.value === undefined ? props.defaultValue : props.value);

components/input/inputProps.ts

@@ -3,8 +3,14 @@ import PropTypes from '../_util/vue-types';
 import type { SizeType } from '../config-provider';
 import omit from '../_util/omit';
 import type { LiteralUnion, VueNode } from '../_util/type';
+import type {
+  ChangeEventHandler,
+  CompositionEventHandler,
+  FocusEventHandler,
+  KeyboardEventHandler,
+} from '../_util/EventInterface';
 export const inputDefaultValue = Symbol() as unknown as string;
-const inputProps = {
+const inputProps = () => ({
   id: String,
   prefixCls: String,
   inputPrefixCls: String,
@@ -63,19 +69,19 @@ const inputProps = {
   bordered: { type: Boolean, default: undefined },
   showCount: { type: [Boolean, Object] as PropType<boolean | ShowCountProps> },
   htmlSize: Number,
-  onPressEnter: Function,
-  onKeydown: Function,
-  onKeyup: Function,
-  onFocus: Function,
-  onBlur: Function,
-  onChange: Function,
-  onInput: Function,
-  'onUpdate:value': Function,
+  onPressEnter: Function as PropType<KeyboardEventHandler>,
+  onKeydown: Function as PropType<KeyboardEventHandler>,
+  onKeyup: Function as PropType<KeyboardEventHandler>,
+  onFocus: Function as PropType<FocusEventHandler>,
+  onBlur: Function as PropType<FocusEventHandler>,
+  onChange: Function as PropType<ChangeEventHandler>,
+  onInput: Function as PropType<ChangeEventHandler>,
+  'onUpdate:value': Function as PropType<(val: string) => void>,
   valueModifiers: Object,
   hidden: Boolean,
-};
+});
 export default inputProps;
-export type InputProps = Partial<ExtractPropTypes<typeof inputProps>>;
+export type InputProps = Partial<ExtractPropTypes<ReturnType<typeof inputProps>>>;
 
 export interface AutoSizeType {
   minRows?: number;
@@ -84,17 +90,17 @@ export interface AutoSizeType {
 export interface ShowCountProps {
   formatter: (args: { count: number; maxlength?: number }) => VueNode;
 }
-const textAreaProps = {
-  ...omit(inputProps, ['prefix', 'addonBefore', 'addonAfter', 'suffix']),
+const textAreaProps = () => ({
+  ...omit(inputProps(), ['prefix', 'addonBefore', 'addonAfter', 'suffix']),
   rows: Number,
   autosize: { type: [Boolean, Object] as PropType<AutoSizeType>, default: undefined },
   autoSize: { type: [Boolean, Object] as PropType<AutoSizeType>, default: undefined },
   onResize: { type: Function as PropType<(size: { width: number; height: number }) => void> },
-  onCompositionstart: Function,
-  onCompositionend: Function,
+  onCompositionstart: Function as PropType<CompositionEventHandler>,
+  onCompositionend: Function as PropType<CompositionEventHandler>,
   valueModifiers: Object,
-};
+});
 
 export { textAreaProps };
 
-export type TextAreaProps = Partial<ExtractPropTypes<typeof textAreaProps>>;
+export type TextAreaProps = Partial<ExtractPropTypes<ReturnType<typeof textAreaProps>>>;