types(Uploader): add UploaderInstance type (#9164)

* types(Uploader): add UploaderInstance type

* types: UploaderExpose

* fix: types

src/uploader/README.md

@@ -358,6 +358,19 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Upload
 | closeImagePreview | Close full screen image preview | - | - |
 | chooseFile | Trigger choosing files, works with the user action context only because of browser security | - | - |
 
+### Types
+
+Get the type definition of the Uploader instance through `UploaderInstance`.
+
+```ts
+import { ref } from 'vue';
+import type { UploaderInstance } from 'vant';
+
+const uploaderRef = ref<UploaderInstance>();
+
+uploaderRef.value?.chooseFile();
+```
+
 ### CSS Variables
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).

src/uploader/README.zh-CN.md

@@ -383,6 +383,19 @@ before-read、after-read、before-delete 执行时会传递以下回调参数：
 | closeImagePreview | 关闭全屏的图片预览 | - | - |
 | chooseFile | 主动调起文件选择，由于浏览器安全限制，只有在用户触发操作的上下文中调用才有效 | - | - |
 
+### 类型定义
+
+通过 `UploaderInstance` 获取 Uploader 实例的类型定义。
+
+```ts
+import { ref } from 'vue';
+import type { UploaderInstance } from 'vant';
+
+const uploaderRef = ref<UploaderInstance>();
+
+uploaderRef.value?.chooseFile();
+```
+
 ### 样式变量
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。

src/uploader/Uploader.tsx

@@ -1,4 +1,10 @@
-import { ref, reactive, PropType, defineComponent } from 'vue';
+import {
+  ref,
+  reactive,
+  PropType,
+  defineComponent,
+  ExtractPropTypes,
+} from 'vue';
 
 // Utils
 import {
@@ -17,9 +23,6 @@ import {
   filterFiles,
   isImageFile,
   readFileContent,
-  UploaderMaxSize,
-  UploaderResultType,
-  UploaderFileListItem,
 } from './utils';
 
 // Composables
@@ -34,77 +37,71 @@ import UploaderPreviewItem from './UploaderPreviewItem';
 // Types
 import type { ImageFit } from '../image';
 import type { Interceptor } from '../utils/interceptor';
+import type {
+  UploaderExpose,
+  UploaderMaxSize,
+  UploaderAfterRead,
+  UploaderBeforeRead,
+  UploaderResultType,
+  UploaderFileListItem,
+} from './types';
 
-type PromiseOrNot<T> = T | Promise<T>;
+const props = {
+  capture: String,
+  multiple: Boolean,
+  disabled: Boolean,
+  readonly: Boolean,
+  lazyLoad: Boolean,
+  uploadText: String,
+  deletable: truthProp,
+  afterRead: Function as PropType<UploaderAfterRead>,
+  showUpload: truthProp,
+  beforeRead: Function as PropType<UploaderBeforeRead>,
+  beforeDelete: Function as PropType<Interceptor>,
+  previewSize: [Number, String],
+  previewImage: truthProp,
+  previewOptions: Object as PropType<ImagePreviewOptions>,
+  previewFullImage: truthProp,
+  name: {
+    type: [Number, String],
+    default: '',
+  },
+  accept: {
+    type: String,
+    default: 'image/*',
+  },
+  modelValue: {
+    type: Array as PropType<UploaderFileListItem[]>,
+    default: () => [],
+  },
+  maxSize: {
+    type: [Number, String, Function] as PropType<UploaderMaxSize>,
+    default: Number.MAX_VALUE,
+  },
+  maxCount: {
+    type: [Number, String],
+    default: Number.MAX_VALUE,
+  },
+  imageFit: {
+    type: String as PropType<ImageFit>,
+    default: 'cover',
+  },
+  resultType: {
+    type: String as PropType<UploaderResultType>,
+    default: 'dataUrl',
+  },
+  uploadIcon: {
+    type: String,
+    default: 'photograph',
+  },
+};
 
-export type UploaderBeforeRead = (
+export type UploaderProps = ExtractPropTypes<typeof props>;
-  file: File | File[],
-  detail: {
-    name: string | number;
-    index: number;
-  }
-) => PromiseOrNot<File | File[] | undefined>;
-
-export type UploaderAfterRead = (
-  items: UploaderFileListItem | UploaderFileListItem[],
-  detail: {
-    name: string | number;
-    index: number;
-  }
-) => void;
 
 export default defineComponent({
   name,
 
-  props: {
+  props,
-    capture: String,
-    multiple: Boolean,
-    disabled: Boolean,
-    readonly: Boolean,
-    lazyLoad: Boolean,
-    uploadText: String,
-    deletable: truthProp,
-    afterRead: Function as PropType<UploaderAfterRead>,
-    showUpload: truthProp,
-    beforeRead: Function as PropType<UploaderBeforeRead>,
-    beforeDelete: Function as PropType<Interceptor>,
-    previewSize: [Number, String],
-    previewImage: truthProp,
-    previewOptions: Object as PropType<ImagePreviewOptions>,
-    previewFullImage: truthProp,
-    name: {
-      type: [Number, String],
-      default: '',
-    },
-    accept: {
-      type: String,
-      default: 'image/*',
-    },
-    modelValue: {
-      type: Array as PropType<UploaderFileListItem[]>,
-      default: () => [],
-    },
-    maxSize: {
-      type: [Number, String, Function] as PropType<UploaderMaxSize>,
-      default: Number.MAX_VALUE,
-    },
-    maxCount: {
-      type: [Number, String],
-      default: Number.MAX_VALUE,
-    },
-    imageFit: {
-      type: String as PropType<ImageFit>,
-      default: 'cover',
-    },
-    resultType: {
-      type: String as PropType<UploaderResultType>,
-      default: 'dataUrl',
-    },
-    uploadIcon: {
-      type: String,
-      default: 'photograph',
-    },
-  },
 
   emits: [
     'delete',
@@ -358,7 +355,7 @@ export default defineComponent({
       }
     };
 
-    useExpose({
+    useExpose<UploaderExpose>({
       chooseFile,
       closeImagePreview,
     });

src/uploader/UploaderPreviewItem.tsx

@@ -1,7 +1,7 @@
 import { PropType, defineComponent } from 'vue';
 
 // Utils
-import { bem, isImageFile, UploaderFileListItem } from './utils';
+import { bem, isImageFile } from './utils';
 import { isDef, getSizeStyle, extend } from '../utils';
 import { callInterceptor, Interceptor } from '../utils/interceptor';
 
@@ -10,6 +10,9 @@ import { Icon } from '../icon';
 import { Image, ImageFit } from '../image';
 import { Loading } from '../loading';
 
+// Types
+import type { UploaderFileListItem } from './types';
+
 export default defineComponent({
   props: {
     name: [Number, String],

src/uploader/demo/index.vue

@@ -56,7 +56,7 @@
 <script lang="ts">
 import { reactive, toRefs } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import { UploaderFileListItem } from '../utils';
+import { UploaderFileListItem } from '../types';
 import { Toast } from '../../toast';
 
 const i18n = {

src/uploader/index.ts

@@ -5,4 +5,8 @@ const Uploader = withInstall<typeof _Uploader>(_Uploader);
 
 export default Uploader;
 export { Uploader };
-export type { UploaderResultType, UploaderFileListItem } from './utils';
+export type {
+  UploaderInstance,
+  UploaderResultType,
+  UploaderFileListItem,
+} from './types';

src/uploader/types.ts

@@ -0,0 +1,49 @@
+import type { ComponentPublicInstance } from 'vue';
+import type { ImageFit } from '../image';
+import type { Interceptor } from '../utils/interceptor';
+import type { UploaderProps } from './Uploader';
+
+export type UploaderResultType = 'dataUrl' | 'text' | 'file';
+
+export type UploaderFileListItem = {
+  url?: string;
+  file?: File;
+  content?: string;
+  isImage?: boolean;
+  status?: '' | 'uploading' | 'done' | 'failed';
+  message?: string;
+  imageFit?: ImageFit;
+  deletable?: boolean;
+  previewSize?: number | string;
+  beforeDelete?: Interceptor;
+};
+
+export type UploaderMaxSize = number | string | ((file: File) => boolean);
+
+type PromiseOrNot<T> = T | Promise<T>;
+
+export type UploaderBeforeRead = (
+  file: File | File[],
+  detail: {
+    name: string | number;
+    index: number;
+  }
+) => PromiseOrNot<File | File[] | undefined>;
+
+export type UploaderAfterRead = (
+  items: UploaderFileListItem | UploaderFileListItem[],
+  detail: {
+    name: string | number;
+    index: number;
+  }
+) => void;
+
+export type UploaderExpose = {
+  chooseFile: () => void;
+  closeImagePreview: () => void;
+};
+
+export type UploaderInstance = ComponentPublicInstance<
+  UploaderProps,
+  UploaderExpose
+>;

src/uploader/utils.ts

@@ -1,28 +1,14 @@
 import { createNamespace, isFunction } from '../utils';
-import type { ImageFit } from '../image';
+import type {
-import type { Interceptor } from '../utils/interceptor';
+  UploaderMaxSize,
+  UploaderResultType,
+  UploaderFileListItem,
+} from './types';
 
 const [name, bem] = createNamespace('uploader');
 
 export { name, bem };
 
-export type UploaderResultType = 'dataUrl' | 'text' | 'file';
-
-export type UploaderFileListItem = {
-  url?: string;
-  file?: File;
-  content?: string;
-  isImage?: boolean;
-  status?: '' | 'uploading' | 'done' | 'failed';
-  message?: string;
-  imageFit?: ImageFit;
-  deletable?: boolean;
-  previewSize?: number | string;
-  beforeDelete?: Interceptor;
-};
-
-export type UploaderMaxSize = number | string | ((file: File) => boolean);
-
 export function toArray<T>(item: T | T[]): T[] {
   if (Array.isArray(item)) {
     return item;