types(AddressEdit): add AddressEditInstance type (#9197)

src/address-edit/AddressEdit.tsx

@@ -6,6 +6,7 @@ import {
   reactive,
   PropType,
   defineComponent,
+  ExtractPropTypes,
 } from 'vue';
 
 // Utils
@@ -30,24 +31,14 @@ import { Toast } from '../toast';
 import { Button } from '../button';
 import { Dialog } from '../dialog';
 import { Switch } from '../switch';
-import AddressEditDetail, { AddressEditSearchItem } from './AddressEditDetail';
+import AddressEditDetail from './AddressEditDetail';
+
+// Types
+import type { AddressEditInfo, AddressEditSearchItem } from './types';
 
 const [name, bem, t] = createNamespace('address-edit');
 
-export type AddressEditInfo = {
+const DEFAULT_DATA: AddressEditInfo = {
-  tel: string;
-  name: string;
-  city: string;
-  county: string;
-  country: string;
-  province: string;
-  areaCode: string;
-  isDefault?: boolean;
-  postalCode?: string;
-  addressDetail: string;
-};
-
-const defaultData: AddressEditInfo = {
   name: '',
   tel: '',
   city: '',
@@ -64,53 +55,57 @@ function isPostal(value: string) {
   return /^\d{6}$/.test(value);
 }
 
+const props = {
+  areaList: Object as PropType<AreaList>,
+  isSaving: Boolean,
+  isDeleting: Boolean,
+  validator: Function as PropType<
+    (key: string, value: string) => string | undefined
+  >,
+  showArea: truthProp,
+  showDetail: truthProp,
+  showDelete: Boolean,
+  showPostal: Boolean,
+  disableArea: Boolean,
+  searchResult: Array as PropType<AddressEditSearchItem[]>,
+  telMaxlength: [Number, String],
+  showSetDefault: Boolean,
+  saveButtonText: String,
+  areaPlaceholder: String,
+  deleteButtonText: String,
+  showSearchResult: Boolean,
+  detailRows: {
+    type: [Number, String],
+    default: 1,
+  },
+  detailMaxlength: {
+    type: [Number, String],
+    default: 200,
+  },
+  addressInfo: {
+    type: Object as PropType<Partial<AddressEditInfo>>,
+    default: () => extend({}, DEFAULT_DATA),
+  },
+  telValidator: {
+    type: Function as PropType<(val: string) => boolean>,
+    default: isMobile,
+  },
+  postalValidator: {
+    type: Function as PropType<(val: string) => boolean>,
+    default: isPostal,
+  },
+  areaColumnsPlaceholder: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+};
+
+export type AddressEditProps = ExtractPropTypes<typeof props>;
+
 export default defineComponent({
   name,
 
-  props: {
+  props,
-    areaList: Object as PropType<AreaList>,
-    isSaving: Boolean,
-    isDeleting: Boolean,
-    validator: Function as PropType<
-      (key: string, value: string) => string | undefined
-    >,
-    showArea: truthProp,
-    showDetail: truthProp,
-    showDelete: Boolean,
-    showPostal: Boolean,
-    disableArea: Boolean,
-    searchResult: Array as PropType<AddressEditSearchItem[]>,
-    telMaxlength: [Number, String],
-    showSetDefault: Boolean,
-    saveButtonText: String,
-    areaPlaceholder: String,
-    deleteButtonText: String,
-    showSearchResult: Boolean,
-    detailRows: {
-      type: [Number, String],
-      default: 1,
-    },
-    detailMaxlength: {
-      type: [Number, String],
-      default: 200,
-    },
-    addressInfo: {
-      type: Object as PropType<Partial<AddressEditInfo>>,
-      default: () => extend({}, defaultData),
-    },
-    telValidator: {
-      type: Function as PropType<(val: string) => boolean>,
-      default: isMobile,
-    },
-    postalValidator: {
-      type: Function as PropType<(val: string) => boolean>,
-      default: isPostal,
-    },
-    areaColumnsPlaceholder: {
-      type: Array as PropType<string[]>,
-      default: () => [],
-    },
-  },
 
   emits: [
     'save',
@@ -317,7 +312,7 @@ export default defineComponent({
     watch(
       () => props.addressInfo,
       (value) => {
-        state.data = extend({}, defaultData, value);
+        state.data = extend({}, DEFAULT_DATA, value);
         setAreaCode(value.areaCode);
       },
       {

src/address-edit/AddressEditDetail.tsx

@@ -7,14 +7,12 @@ import { isAndroid, ComponentInstance, createNamespace } from '../utils';
 import { Cell } from '../cell';
 import { Field } from '../field';
 
+// Types
+import type { AddressEditSearchItem } from './types';
+
 const [name, bem, t] = createNamespace('address-edit-detail');
 const android = isAndroid();
 
-export type AddressEditSearchItem = {
-  name: string;
-  address: string;
-};
-
 export default defineComponent({
   name,
 

src/address-edit/README.md

@@ -126,6 +126,19 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Addres
 | --- | --- | --- | --- |
 | setAddressDetail | Set address detail | _addressDetail: string_ | - |
 
+### Types
+
+Get the type definition of the AddressEdit instance through `AddressEditInstance`.
+
+```ts
+import { ref } from 'vue';
+import type { AddressEditInstance } from 'vant';
+
+const addressEditRef = ref<AddressEditInstance>();
+
+addressEditRef.value?.setAddressDetail('');
+```
+
 ### AddressInfo Data Structure
 
 | key           | Description        | Type      |

src/address-edit/README.zh-CN.md

@@ -126,6 +126,19 @@ export default {
 | ---------------- | ------------ | ----------------------- | ------ |
 | setAddressDetail | 设置详细地址 | _addressDetail: string_ | -      |
 
+### 类型定义
+
+通过 `AddressEditInstance` 获取 AddressEdit 实例的类型定义。
+
+```ts
+import { ref } from 'vue';
+import type { AddressEditInstance } from 'vant';
+
+const addressEditRef = ref<AddressEditInstance>();
+
+addressEditRef.value?.setAddressDetail('');
+```
+
 ### AddressInfo 数据格式
 
 注意：`AddressInfo` 仅作为初始值传入，表单最终内容可以在 save 事件中获取。

src/address-edit/index.ts

@@ -5,5 +5,8 @@ const AddressEdit = withInstall<typeof _AddressEdit>(_AddressEdit);
 
 export default AddressEdit;
 export { AddressEdit };
-export type { AddressEditInfo } from './AddressEdit';
+export type {
-export type { AddressEditSearchItem } from './AddressEditDetail';
+  AddressEditInfo,
+  AddressEditInstance,
+  AddressEditSearchItem,
+} from './types';

src/address-edit/types.ts

@@ -0,0 +1,32 @@
+import type { ComponentPublicInstance } from 'vue';
+import type { AreaColumnOption } from '../area';
+import type { AddressEditProps } from './AddressEdit';
+
+export type AddressEditSearchItem = {
+  name: string;
+  address: string;
+};
+
+export type AddressEditInfo = {
+  tel: string;
+  name: string;
+  city: string;
+  county: string;
+  country: string;
+  province: string;
+  areaCode: string;
+  isDefault?: boolean;
+  postalCode?: string;
+  addressDetail: string;
+};
+
+export type AddressEditExpose = {
+  getArea: () => AreaColumnOption[];
+  setAreaCode: (code?: string | undefined) => void;
+  setAddressDetail: (value: string) => void;
+};
+
+export type AddressEditInstance = ComponentPublicInstance<
+  AddressEditProps,
+  AddressEditExpose
+>;

src/area/types.ts

@@ -1,7 +1,6 @@
 /* eslint-disable camelcase */
-
+import type { ComponentPublicInstance } from 'vue';
-import { ComponentPublicInstance } from 'vue';
+import type { AreaProps } from './Area';
-import { AreaProps } from './Area';
 
 export type AreaList = {
   city_list: Record<string, string>;