types: add SwipeInstance type (#9158)

src/swipe/README.md

@@ -179,6 +179,19 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Swipe
 | swipeTo | Swipe to target index | _index: number, options: SwipeToOptions_ | - |
 | resize | Resize Swipe when container element resized or visibility changed | - | - |
 
+### Types
+
+Get the type definition of the Swipe instance through `SwipeInstance`.
+
+```ts
+import { ref } from 'vue';
+import type { SwipeInstance } from 'vant';
+
+const swipeRef = ref<SwipeInstance>();
+
+swipeRef.value?.next();
+```
+
 ### SwipeToOptions
 
 | Name      | Description               | Type      |

src/swipe/README.zh-CN.md

@@ -187,6 +187,19 @@ export default {
 | swipeTo | 切换到指定位置 | _index: number, options: SwipeToOptions_ | - |
 | resize | 外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘 | - | - |
 
+### 类型定义
+
+通过 `SwipeInstance` 获取 Swipe 实例的类型定义。
+
+```ts
+import { ref } from 'vue';
+import type { SwipeInstance } from 'vant';
+
+const swipeRef = ref<SwipeInstance>();
+
+swipeRef.value?.next();
+```
+
 ### SwipeToOptions 格式
 
 | 名称      | 说明         | 类型      |

src/swipe/Swipe.tsx

@@ -4,7 +4,6 @@ import {
   reactive,
   computed,
   onMounted,
-  ComputedRef,
   onActivated,
   InjectionKey,
   CSSProperties,
@@ -34,6 +33,9 @@ import { useTouch } from '../composables/use-touch';
 import { useExpose } from '../composables/use-expose';
 import { onPopupReopen } from '../composables/on-popup-reopen';
 
+// Types
+import { SwipeState, SwipeExpose, SwipeProvide, SwipeToOptions } from './types';
+
 const [name, bem] = createNamespace('swipe');
 
 const props = {
@@ -60,16 +62,7 @@ const props = {
   },
 };
 
-export type SwipeToOptions = {
-  immediate?: boolean;
-};
-
-export type SwipeProvide = {
-  props: ExtractPropTypes<typeof props>;
-  size: ComputedRef<number>;
-  count: ComputedRef<number>;
-  activeIndicator: ComputedRef<number>;
-};
+export type SwipeProps = ExtractPropTypes<typeof props>;
 
 export const SWIPE_KEY: InjectionKey<SwipeProvide> = Symbol(name);
 
@@ -82,8 +75,8 @@ export default defineComponent({
 
   setup(props, { emit, slots }) {
     const root = ref<HTMLElement>();
-    const state = reactive({
-      rect: null as { width: number; height: number } | null,
+    const state = reactive<SwipeState>({
+      rect: null,
       width: 0,
       height: 0,
       offset: 0,
@@ -403,7 +396,7 @@ export default defineComponent({
       }
     };
 
-    useExpose({
+    useExpose<SwipeExpose>({
       prev,
       next,
       state,

src/swipe/index.ts

@@ -5,4 +5,4 @@ const Swipe = withInstall<typeof _Swipe>(_Swipe);
 
 export default Swipe;
 export { Swipe };
-export type { SwipeToOptions } from './Swipe';
+export type { SwipeInstance, SwipeToOptions } from './types';

src/swipe/types.ts

@@ -0,0 +1,35 @@
+import type { ComponentPublicInstance, ComputedRef } from 'vue';
+import type { SwipeProps } from './Swipe';
+
+export type SwipeState = {
+  rect: { width: number; height: number } | null;
+  width: number;
+  height: number;
+  offset: number;
+  active: number;
+  swiping: boolean;
+};
+
+export type SwipeToOptions = {
+  immediate?: boolean;
+};
+
+export type SwipeExpose = {
+  prev: () => void;
+  next: () => void;
+  resize: () => void;
+  swipeTo: (index: number, options?: SwipeToOptions) => void;
+  /**
+   * @private
+   */
+  state: SwipeState;
+};
+
+export type SwipeProvide = {
+  props: SwipeProps;
+  size: ComputedRef<number>;
+  count: ComputedRef<number>;
+  activeIndicator: ComputedRef<number>;
+};
+
+export type SwipeInstance = ComponentPublicInstance<SwipeProps, SwipeExpose>;