types(Checkbox): add CheckboxInstance type (#9140)

src/checkbox/Checkbox.tsx

@@ -1,4 +1,11 @@
-import { computed, watch, defineComponent } from 'vue';
+import {
+  watch,
+  computed,
+  ComputedRef,
+  defineComponent,
+  ExtractPropTypes,
+  ComponentPublicInstance,
+} from 'vue';
 
 // Utils
 import { createNamespace, extend, pick, truthProp } from '../utils';
@@ -14,12 +21,33 @@ import Checker, { checkerProps } from './Checker';
 
 const [name, bem] = createNamespace('checkbox');
 
+const props = extend({}, checkerProps, {
+  bindGroup: truthProp,
+});
+
+type CheckboxProps = ExtractPropTypes<typeof props>;
+
+type CheckboxExpose = {
+  toggle: (newValue?: boolean) => void;
+  /**
+   * @private
+   */
+  props: CheckboxProps;
+  /**
+   * @private
+   */
+  checked: ComputedRef<boolean>;
+};
+
+export type CheckboxInstance = ComponentPublicInstance<
+  CheckboxProps,
+  CheckboxExpose
+>;
+
 export default defineComponent({
   name,
 
-  props: extend({}, checkerProps, {
-    bindGroup: truthProp,
-  }),
+  props,
 
   emits: ['change', 'update:modelValue'],
 
@@ -74,7 +102,7 @@ export default defineComponent({
       (value) => emit('change', value)
     );
 
-    useExpose({ toggle, props, checked });
+    useExpose<CheckboxExpose>({ toggle, props, checked });
     useLinkField(() => props.modelValue);
 
     return () => (

src/checkbox/README.md

@@ -327,6 +327,19 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Checkb
 | ------ | ------------------- | ------------------- | ------------ |
 | toggle | Toggle check status | _checked?: boolean_ | -            |
 
+### Types
+
+Get the type definition of the Checkbox instance through `CheckboxInstance`.
+
+```ts
+import { ref } from 'vue';
+import type { CheckboxInstance } from 'vant';
+
+const checkboxRef = ref<CheckboxInstance>();
+
+checkboxRef.value?.toggle();
+```
+
 ### 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/checkbox/README.zh-CN.md

@@ -345,6 +345,19 @@ checkboxGroup.toggleAll({
 | --- | --- | --- | --- |
 | toggle | 切换选中状态，传 `true` 为选中，`false` 为取消选中，不传参为取反 | _checked?: boolean_ | - |
 
+### Checkbox 类型定义
+
+通过 `CheckboxInstance` 获取 Checkbox 实例的类型定义。
+
+```ts
+import { ref } from 'vue';
+import type { CheckboxInstance } from 'vant';
+
+const checkboxRef = ref<CheckboxInstance>();
+
+checkboxRef.value?.toggle();
+```
+
 ### 样式变量
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。

src/checkbox/index.ts

@@ -5,3 +5,4 @@ const Checkbox = withInstall<typeof _Checkbox>(_Checkbox);
 
 export default Checkbox;
 export { Checkbox };
+export type { CheckboxInstance } from './Checkbox';