types(CountDown): add CountDownInstance type (#9153)

* types(CountDown): add CountDownInstance type

* chore: fix snapshot

src/count-down/CountDown.tsx

@@ -1,30 +1,53 @@
-import { watch, computed, defineComponent } from 'vue';
+import {
+  watch,
+  computed,
+  defineComponent,
+  ExtractPropTypes,
+  ComponentPublicInstance,
+} from 'vue';
 
 // Utils
 import { truthProp, createNamespace } from '../utils';
 import { parseFormat } from './utils';
 
 // Composables
-import { useCountDown } from '@vant/use';
+import { useCountDown, CurrentTime } from '@vant/use';
 import { useExpose } from '../composables/use-expose';
 
 const [name, bem] = createNamespace('count-down');
 
+const props = {
+  autoStart: truthProp,
+  millisecond: Boolean,
+  time: {
+    type: [Number, String],
+    default: 0,
+  },
+  format: {
+    type: String,
+    default: 'HH:mm:ss',
+  },
+};
+
+type CountDownProps = ExtractPropTypes<typeof props>;
+
+type CountDownExpose = {
+  start: () => void;
+  pause: () => void;
+  reset: () => void;
+};
+
+export type CountDownInstance = ComponentPublicInstance<
+  CountDownProps,
+  CountDownExpose
+>;
+
+export type CountDownCurrentTime = CurrentTime;
+
 export default defineComponent({
   name,
 
-  props: {
+  props,
-    autoStart: truthProp,
-    millisecond: Boolean,
-    time: {
-      type: [Number, String],
-      default: 0,
-    },
-    format: {
-      type: String,
-      default: 'HH:mm:ss',
-    },
-  },
 
   emits: ['change', 'finish'],
 

src/count-down/README.md

@@ -181,6 +181,19 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get CountD
 | pause | Pause count down | -         | -            |
 | reset | Reset count down | -         | -            |
 
+### Types
+
+Get the type definition of the CountDown instance through `CountDownInstance`.
+
+```ts
+import { ref } from 'vue';
+import type { CountDownInstance } from 'vant';
+
+const countDownRef = ref<CountDownInstance>();
+
+countDownRef.value?.start();
+```
+
 ### 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/count-down/README.zh-CN.md

@@ -191,6 +191,19 @@ export default {
 | pause | 暂停倒计时 | - | - |
 | reset | 重设倒计时，若 `auto-start` 为 `true`，重设后会自动开始倒计时 | - | - |
 
+### 类型定义
+
+通过 `CountDownInstance` 获取 CountDown 实例的类型定义。
+
+```ts
+import { ref } from 'vue';
+import type { CountDownInstance } from 'vant';
+
+const countDownRef = ref<CountDownInstance>();
+
+countDownRef.value?.start();
+```
+
 ### 样式变量
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。

src/count-down/index.ts

@@ -5,3 +5,4 @@ const CountDown = withInstall<typeof _CountDown>(_CountDown);
 
 export default CountDown;
 export { CountDown };
+export type { CountDownInstance, CountDownCurrentTime } from './CountDown';

src/count-down/test/index.spec.tsx

@@ -1,6 +1,7 @@
 import { KeepAlive, nextTick } from 'vue';
 import { CountDown } from '..';
 import { mount, later } from '../../../test';
+import type { CountDownCurrentTime, CountDownInstance } from '../CountDown';
 
 test('should emit finish event when finished', async () => {
   const wrapper = mount(CountDown, {
@@ -82,8 +83,9 @@ test('should start counting after calling the start method', async () => {
   });
 
   const prevSnapShot = wrapper.html();
+  const instance = wrapper.vm as CountDownInstance;
 
-  wrapper.vm.start();
+  instance.start();
   await later(50);
 
   const laterSnapShot = wrapper.html();
@@ -100,7 +102,9 @@ test('should pause counting after calling the pause method', async () => {
   });
 
   const prevSnapShot = wrapper.html();
-  wrapper.vm.pause();
+  const instance = wrapper.vm as CountDownInstance;
+
+  instance.pause();
   await later(50);
   const laterSnapShot = wrapper.html();
 
@@ -118,10 +122,11 @@ test('should reset time after calling the reset method', async () => {
   });
 
   const prevSnapShot = wrapper.html();
+  const instance = wrapper.vm as CountDownInstance;
 
-  wrapper.vm.start();
+  instance.start();
   await later(50);
-  wrapper.vm.reset();
+  instance.reset();
   await nextTick();
   const laterSnapShot = wrapper.html();
 
@@ -210,12 +215,14 @@ test('should emit change event when counting', async () => {
 
   expect(wrapper.emitted('change')).toBeFalsy();
   await later(50);
-  expect(wrapper.emitted('change')[0][0]).toEqual({
+  expect(wrapper.emitted<CountDownCurrentTime>('change')![0]).toEqual([
-    days: 0,
+    {
-    hours: 0,
+      days: 0,
-    milliseconds: 0,
+      hours: 0,
-    minutes: 0,
+      milliseconds: 0,
-    seconds: 0,
+      minutes: 0,
-    total: 0,
+      seconds: 0,
-  });
+      total: 0,
+    },
+  ]);
 });