types(Progress): add ProgressInstance type (#9247)

src/progress/Progress.tsx

@@ -6,30 +6,34 @@ import {
   reactive,
   onMounted,
   defineComponent,
+  ExtractPropTypes,
 } from 'vue';
 import { truthProp, createNamespace, addUnit } from '../utils';
 import { useExpose } from '../composables/use-expose';
 
 const [name, bem] = createNamespace('progress');
 
+const props = {
+  color: String,
+  inactive: Boolean,
+  pivotText: String,
+  textColor: String,
+  showPivot: truthProp,
+  pivotColor: String,
+  trackColor: String,
+  strokeWidth: [Number, String],
+  percentage: {
+    type: [Number, String],
+    validator: (value: number | string) => value >= 0 && value <= 100,
+  },
+};
+
+export type ProgressProps = ExtractPropTypes<typeof props>;
+
 export default defineComponent({
   name,
 
-  props: {
-    color: String,
-    inactive: Boolean,
-    pivotText: String,
-    textColor: String,
-    showPivot: truthProp,
-    pivotColor: String,
-    trackColor: String,
-    strokeWidth: [Number, String],
-    percentage: {
-      type: [Number, String],
-      required: true,
-      validator: (value: number | string) => value >= 0 && value <= 100,
-    },
-  },
+  props,
 
   setup(props) {
     const root = ref<HTMLElement>();
@@ -58,7 +62,7 @@ export default defineComponent({
       const show = props.showPivot && text;
 
       if (show) {
-        const left = ((rootWidth - pivotWidth) * +percentage) / 100;
+        const left = ((rootWidth - pivotWidth) * +percentage!) / 100;
         const style = {
           color: textColor,
           left: `${left}px`,
@@ -85,7 +89,7 @@ export default defineComponent({
       };
       const portionStyle = {
         background: background.value,
-        width: (state.rootWidth * +percentage) / 100 + 'px',
+        width: (state.rootWidth * +percentage!) / 100 + 'px',
       };
 
       return (

src/progress/README.md

@@ -77,6 +77,19 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get Progress instance and call insta
 | --- | --- | --- | --- |
 | resize | Resize Progress when container element resized or visibility changed | - | - |
 
+### Types
+
+Get the type definition of the Progress instance through `ProgressInstance`.
+
+```ts
+import { ref } from 'vue';
+import type { ProgressInstance } from 'vant';
+
+const progressRef = ref<ProgressInstance>();
+
+progressRef.value?.resize();
+```
+
 ### 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/progress/README.zh-CN.md

@@ -81,6 +81,19 @@ app.use(Progress);
 | ------ | -------------------------------------------- | ---- | ------ |
 | resize | 外层元素大小变化后，可以调用此方法来触发重绘 | -    | -      |
 
+### 类型定义
+
+通过 `ProgressInstance` 获取 Progress 实例的类型定义（从 3.2.0 版本开始支持）。
+
+```ts
+import { ref } from 'vue';
+import type { ProgressInstance } from 'vant';
+
+const progressRef = ref<ProgressInstance>();
+
+progressRef.value?.resize();
+```
+
 ### 样式变量
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。

src/progress/index.ts

@@ -5,3 +5,4 @@ const Progress = withInstall<typeof _Progress>(_Progress);
 
 export default Progress;
 export { Progress };
+export type { ProgressInstance } from './types';

src/progress/types.ts

@@ -0,0 +1,11 @@
+import type { ComponentPublicInstance } from 'vue';
+import type { ProgressProps } from './Progress';
+
+export type ProgressExpose = {
+  resize: () => void;
+};
+
+export type ProgressInstance = ComponentPublicInstance<
+  ProgressProps,
+  ProgressExpose
+>;