feat: update ts type

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>>>;

components/layout/Sider.tsx

@@ -23,7 +23,7 @@ const dimensionMaxMap = {
 
 export type CollapseType = 'clickTrigger' | 'responsive';
 
-export const siderProps = {
+export const siderProps = () => ({
   prefixCls: String,
   collapsible: { type: Boolean, default: undefined },
   collapsed: { type: Boolean, default: undefined },
@@ -40,14 +40,9 @@ export const siderProps = {
   theme: PropTypes.oneOf(tuple('light', 'dark')).def('dark'),
   onBreakpoint: Function as PropType<(broken: boolean) => void>,
   onCollapse: Function as PropType<(collapsed: boolean, type: CollapseType) => void>,
-};
+});
 
-export type SiderProps = Partial<ExtractPropTypes<typeof siderProps>>;
-// export interface SiderState {
-//   collapsed?: boolean;
-//   below: boolean;
-//   belowShow?: boolean;
-// }
+export type SiderProps = Partial<ExtractPropTypes<ReturnType<typeof siderProps>>>;
 
 export interface SiderContextProps {
   sCollapsed?: boolean;
@@ -65,7 +60,7 @@ const generateId = (() => {
 export default defineComponent({
   name: 'ALayoutSider',
   inheritAttrs: false,
-  props: initDefaultProps(siderProps, {
+  props: initDefaultProps(siderProps(), {
     collapsible: false,
     defaultCollapsed: false,
     reverseArrow: false,

components/layout/layout.tsx

@@ -3,13 +3,13 @@ import { computed, createVNode, defineComponent, provide, ref } from 'vue';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import { SiderHookProviderKey } from './injectionKey';
 
-export const basicProps = {
+export const basicProps = () => ({
   prefixCls: String,
   hasSider: { type: Boolean, default: undefined },
   tagName: String,
-};
+});
 
-export type BasicProps = Partial<ExtractPropTypes<typeof basicProps>> & HTMLAttributes;
+export type BasicProps = Partial<ExtractPropTypes<ReturnType<typeof basicProps>>> & HTMLAttributes;
 
 type GeneratorArgument = {
   suffixCls: string;
@@ -21,7 +21,7 @@ function generator({ suffixCls, tagName, name }: GeneratorArgument) {
   return (BasicComponent: typeof Basic) => {
     const Adapter = defineComponent({
       name,
-      props: basicProps,
+      props: basicProps(),
       setup(props, { slots }) {
         const { prefixCls } = useConfigInject(suffixCls, props);
         return () => {
@@ -39,14 +39,14 @@ function generator({ suffixCls, tagName, name }: GeneratorArgument) {
 }
 
 const Basic = defineComponent({
-  props: basicProps,
+  props: basicProps(),
   setup(props, { slots }) {
     return () => createVNode(props.tagName, { class: props.prefixCls }, slots);
   },
 });
 
 const BasicLayout = defineComponent({
-  props: basicProps,
+  props: basicProps(),
   setup(props, { slots }) {
     const { direction } = useConfigInject('', props);
     const siders = ref<string[]>([]);

components/list/Item.tsx

@@ -3,25 +3,27 @@ import classNames from '../_util/classNames';
 import { isStringElement, isEmptyElement, flattenChildren } from '../_util/props-util';
 import { Col } from '../grid';
 import { cloneElement } from '../_util/vnode';
-import type { CSSProperties, PropType } from 'vue';
+import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
 import { defineComponent, inject, ref } from 'vue';
 import ItemMeta from './ItemMeta';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import { ListContextKey } from './contextKey';
+import type { ListGridType } from '.';
 
-export const ListItemProps = {
+export const listItemProps = () => ({
   prefixCls: String,
   extra: PropTypes.any,
   actions: PropTypes.array,
-  grid: PropTypes.any,
+  grid: Object as PropType<ListGridType>,
   colStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
-};
+});
 
+export type ListItemProps = Partial<ExtractPropTypes<ReturnType<typeof listItemProps>>>;
 export default defineComponent({
   name: 'AListItem',
   inheritAttrs: false,
   Meta: ItemMeta,
-  props: ListItemProps,
+  props: listItemProps(),
   slots: ['actions', 'extra'],
   setup(props, { slots, attrs }) {
     const { itemLayout, grid } = inject(ListContextKey, {

components/list/ItemMeta.tsx

@@ -3,18 +3,18 @@ import { defineComponent } from 'vue';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import PropTypes from '../_util/vue-types';
 
-export const listItemMetaProps = {
+export const listItemMetaProps = () => ({
   avatar: PropTypes.any,
   description: PropTypes.any,
   prefixCls: String,
   title: PropTypes.any,
-};
+});
 
-export type ListItemMetaProps = Partial<ExtractPropTypes<typeof listItemMetaProps>>;
+export type ListItemMetaProps = Partial<ExtractPropTypes<ReturnType<typeof listItemMetaProps>>>;
 
 export default defineComponent({
   name: 'AListItemMeta',
-  props: listItemMetaProps,
+  props: listItemMetaProps(),
   displayName: 'AListItemMeta', // 兼容历史函数式组件
   __ANT_LIST_ITEM_META: true,
   slots: ['avatar', 'description', 'title'],

components/list/index.tsx

@@ -19,7 +19,7 @@ import type { Breakpoint } from '../_util/responsiveObserve';
 import { responsiveArray } from '../_util/responsiveObserve';
 import eagerComputed from '../_util/eagerComputed';
 
-export { ListItemProps } from './Item';
+export type { ListItemProps } from './Item';
 export type { ListItemMetaProps } from './ItemMeta';
 
 export type ColumnType = 'gutter' | 'column' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
@@ -57,7 +57,7 @@ export const listProps = () => ({
   },
   prefixCls: String,
   rowKey: [String, Number, Function] as PropType<Key | ((item: any) => Key)>,
-  renderItem: PropTypes.any,
+  renderItem: Function as PropType<(opt: { item: any; index: number }) => any>,
   size: String as PropType<ListSize>,
   split: { type: Boolean, default: undefined },
   header: PropTypes.any,

components/mentions/index.tsx

@@ -9,6 +9,7 @@ import { flattenChildren, getOptionProps } from '../_util/props-util';
 import { useInjectFormItemContext } from '../form/FormItemContext';
 import omit from '../_util/omit';
 import { optionProps } from '../vc-mentions/src/Option';
+import type { KeyboardEventHandler } from '../_util/EventInterface';
 
 interface MentionsConfig {
   prefix?: string | string[];
@@ -58,7 +59,7 @@ const getMentions = (value = '', config: MentionsConfig = {}): MentionsEntity[]
     .filter((entity): entity is MentionsEntity => !!entity && !!entity.value);
 };
 
-export const mentionsProps = {
+export const mentionsProps = () => ({
   ...baseMentionsProps,
   loading: { type: Boolean, default: undefined },
   onFocus: {
@@ -73,18 +74,23 @@ export const mentionsProps = {
   onChange: {
     type: Function as PropType<(text: string) => void>,
   },
+  onPressenter: {
+    type: Function as PropType<KeyboardEventHandler>,
+  },
+  'onUpdate:value': {
+    type: Function as PropType<(text: string) => void>,
+  },
   notFoundContent: PropTypes.any,
   defaultValue: String,
   id: String,
-};
+});
 
-export type MentionsProps = Partial<ExtractPropTypes<typeof mentionsProps>>;
+export type MentionsProps = Partial<ExtractPropTypes<ReturnType<typeof mentionsProps>>>;
 
 const Mentions = defineComponent({
   name: 'AMentions',
   inheritAttrs: false,
-  props: mentionsProps,
-  emits: ['update:value', 'change', 'focus', 'blur', 'select', 'pressenter'],
+  props: mentionsProps(),
   slots: ['notFoundContent', 'option'],
   setup(props, { slots, emit, attrs, expose }) {
     const { prefixCls, renderEmpty, direction } = useConfigInject('mentions', props);

components/vc-image/src/Image.tsx

@@ -28,7 +28,7 @@ export interface ImagePropsType extends Omit<ImgHTMLAttributes, 'placeholder' |
   fallback?: string;
   preview?: boolean | ImagePreviewType;
 }
-export const imageProps = {
+export const imageProps = () => ({
   src: String,
   wrapperClassName: String,
   wrapperStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
@@ -40,7 +40,7 @@ export const imageProps = {
     type: [Boolean, Object] as PropType<boolean | ImagePreviewType>,
     default: true as boolean | ImagePreviewType,
   },
-};
+});
 type ImageStatus = 'normal' | 'error' | 'loading';
 
 const mergeDefaultValue = <T extends object>(obj: T, defaultValues: object): T => {
@@ -56,7 +56,7 @@ let uuid = 0;
 const ImageInternal = defineComponent({
   name: 'Image',
   inheritAttrs: false,
-  props: imageProps,
+  props: imageProps(),
   emits: ['click'],
   setup(props, { attrs, slots, emit }) {
     const prefixCls = computed(() => props.prefixCls);