types(Area): add AreaInstance type (#9195)

src/area/Area.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable camelcase */
 import {
   ref,
   watch,
@@ -8,6 +7,7 @@ import {
   PropType,
   onMounted,
   defineComponent,
+  ExtractPropTypes,
 } from 'vue';
 
 // Utils
@@ -21,6 +21,9 @@ import { useExpose } from '../composables/use-expose';
 // Components
 import { Picker } from '../picker';
 
+// Types
+import type { AreaList, AreaColumnType, AreaColumnOption } from './types';
+
 const [name, bem] = createNamespace('area');
 
 const EMPTY_CODE = '000000';
@@ -47,41 +50,32 @@ function isOverseaCode(code: string) {
   return code[0] === '9';
 }
 
-export type AreaList = {
+const props = extend({}, pickerProps, {
-  city_list: Record<string, string>;
+  value: String,
-  county_list: Record<string, string>;
+  areaList: {
-  province_list: Record<string, string>;
+    type: Object as PropType<AreaList>,
-};
+    default: () => ({}),
+  },
+  columnsNum: {
+    type: [Number, String],
+    default: 3,
+  },
+  isOverseaCode: {
+    type: Function as PropType<(code: string) => boolean>,
+    default: isOverseaCode,
+  },
+  columnsPlaceholder: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
 
-export type AreaColumnOption = {
+export type AreaProps = ExtractPropTypes<typeof props>;
-  name: string;
-  code: string;
-};
-
-type ColumnType = 'province' | 'county' | 'city';
 
 export default defineComponent({
   name,
 
-  props: extend({}, pickerProps, {
+  props,
-    value: String,
-    areaList: {
-      type: Object as PropType<AreaList>,
-      default: () => ({}),
-    },
-    columnsNum: {
-      type: [Number, String],
-      default: 3,
-    },
-    isOverseaCode: {
-      type: Function as PropType<(code: string) => boolean>,
-      default: isOverseaCode,
-    },
-    columnsPlaceholder: {
-      type: Array as PropType<string[]>,
-      default: () => [],
-    },
-  }),
 
   emits: ['change', 'confirm'],
 
@@ -131,7 +125,7 @@ export default defineComponent({
       return '';
     };
 
-    const getColumnValues = (type: ColumnType, code?: string) => {
+    const getColumnValues = (type: AreaColumnType, code?: string) => {
       let column: AreaColumnOption[] = [];
       if (type !== 'province' && !code) {
         return column;
@@ -170,7 +164,7 @@ export default defineComponent({
     };
 
     // get index by code
-    const getIndex = (type: ColumnType, code: string) => {
+    const getIndex = (type: AreaColumnType, code: string) => {
       let compareNum = code.length;
       if (type === 'province') {
         compareNum = props.isOverseaCode(code) ? 1 : 2;

src/area/README.md

@@ -163,3 +163,16 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Area i
 | Name  | Description               | Attribute       | Return value |
 | ----- | ------------------------- | --------------- | ------------ |
 | reset | Reset all options by code | _code?: string_ | -            |
+
+### Types
+
+Get the type definition of the Area instance through `AreaInstance`.
+
+```ts
+import { ref } from 'vue';
+import type { AreaInstance } from 'vant';
+
+const areaRef = ref<AreaInstance>();
+
+areaRef.value?.reset();
+```

src/area/README.zh-CN.md

@@ -166,6 +166,19 @@ confirm 事件返回的数据整体为一个数组，数组每一项对应一列
 | --- | --- | --- | --- |
 | reset | 根据地区码重置所有选项，若不传地区码，则重置到第一项 | _code?: string_ | - |
 
+### 类型定义
+
+通过 `AreaInstance` 获取 Area 实例的类型定义。
+
+```ts
+import { ref } from 'vue';
+import type { AreaInstance } from 'vant';
+
+const areaRef = ref<AreaInstance>();
+
+areaRef.value?.reset();
+```
+
 ## 常见问题
 
 ### 在桌面端无法操作组件？

src/area/index.ts

@@ -5,4 +5,4 @@ const Area = withInstall<typeof _Area>(_Area);
 
 export default Area;
 export { Area };
-export type { AreaList, AreaColumnOption } from './Area';
+export type { AreaList, AreaInstance, AreaColumnOption } from './types';

src/area/types.ts

@@ -0,0 +1,31 @@
+/* eslint-disable camelcase */
+
+import { ComponentPublicInstance } from 'vue';
+import { AreaProps } from './Area';
+
+export type AreaList = {
+  city_list: Record<string, string>;
+  county_list: Record<string, string>;
+  province_list: Record<string, string>;
+};
+
+export type AreaColumnOption = {
+  name: string;
+  code: string;
+};
+
+export type AreaColumnType = 'province' | 'county' | 'city';
+
+export type AreaExpose = {
+  reset: (newCode?: string) => void;
+  getArea: () => {
+    code: string;
+    country: string;
+    province: string;
+    city: string;
+    county: string;
+  };
+  getValues: () => AreaColumnOption[];
+};
+
+export type AreaInstance = ComponentPublicInstance<AreaProps, AreaExpose>;