types: add ListInstance type (#9159)

src/list/List.tsx

@@ -6,6 +6,7 @@ import {
   onUpdated,
   onMounted,
   defineComponent,
+  ExtractPropTypes,
 } from 'vue';
 
 // Utils
@@ -19,30 +20,35 @@ import { useTabStatus } from '../composables/use-tab-status';
 // Components
 import { Loading } from '../loading';
 
+// Types
+import type { ListExpose, ListDirection } from './types';
+
 const [name, bem, t] = createNamespace('list');
 
-export type ListDirection = 'up' | 'down';
+const props = {
+  error: Boolean,
+  loading: Boolean,
+  finished: Boolean,
+  errorText: String,
+  loadingText: String,
+  finishedText: String,
+  immediateCheck: truthProp,
+  offset: {
+    type: [Number, String],
+    default: 300,
+  },
+  direction: {
+    type: String as PropType<ListDirection>,
+    default: 'down',
+  },
+};
+
+export type ListProps = ExtractPropTypes<typeof props>;
 
 export default defineComponent({
   name,
 
-  props: {
+  props,
-    error: Boolean,
-    loading: Boolean,
-    finished: Boolean,
-    errorText: String,
-    loadingText: String,
-    finishedText: String,
-    immediateCheck: truthProp,
-    offset: {
-      type: [Number, String],
-      default: 300,
-    },
-    direction: {
-      type: String as PropType<ListDirection>,
-      default: 'down',
-    },
-  },
 
   emits: ['load', 'update:error', 'update:loading'],
 
@@ -157,7 +163,7 @@ export default defineComponent({
       }
     });
 
-    useExpose({ check });
+    useExpose<ListExpose>({ check });
 
     useEventListener('scroll', check, { target: scrollParent });
 

src/list/README.md

@@ -191,6 +191,19 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get List i
 | ----- | --------------------- | --------- | ------------ |
 | check | Check scroll position | -         | -            |
 
+### Types
+
+Get the type definition of the List instance through `ListInstance`.
+
+```ts
+import { ref } from 'vue';
+import type { ListInstance } from 'vant';
+
+const listRef = ref<ListInstance>();
+
+listRef.value?.check();
+```
+
 ### Slots
 
 | Name     | Description          |

src/list/README.zh-CN.md

@@ -206,6 +206,19 @@ export default {
 | --- | --- | --- | --- |
 | check | 检查当前的滚动位置，若已滚动至底部，则会触发 load 事件 | - | - |
 
+### 类型定义
+
+通过 `ListInstance` 获取 List 实例的类型定义。
+
+```ts
+import { ref } from 'vue';
+import type { ListInstance } from 'vant';
+
+const listRef = ref<ListInstance>();
+
+listRef.value?.check();
+```
+
 ### Slots
 
 | 名称     | 说明                       |

src/list/index.ts

@@ -5,4 +5,4 @@ const List = withInstall<typeof _List>(_List);
 
 export default List;
 export { List };
-export type { ListDirection } from './List';
+export type { ListInstance, ListDirection } from './types';

src/list/types.ts

@@ -0,0 +1,10 @@
+import type { ComponentPublicInstance } from 'vue';
+import type { ListProps } from './List';
+
+export type ListDirection = 'up' | 'down';
+
+export type ListExpose = {
+  check: () => void;
+};
+
+export type ListInstance = ComponentPublicInstance<ListProps, ListExpose>;