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 = {
-  tel: string;
-  name: string;
-  city: string;
-  county: string;
-  country: string;
-  province: string;
-  areaCode: string;
-  isDefault?: boolean;
-  postalCode?: string;
-  addressDetail: string;
-};
-
-const defaultData: AddressEditInfo = {
+const DEFAULT_DATA: AddressEditInfo = {
   name: '',
   tel: '',
   city: '',
@@ -64,10 +55,7 @@ function isPostal(value: string) {
   return /^\d{6}$/.test(value);
 }
 
-export default defineComponent({
-  name,
-
-  props: {
+const props = {
   areaList: Object as PropType<AreaList>,
   isSaving: Boolean,
   isDeleting: Boolean,
@@ -96,7 +84,7 @@ export default defineComponent({
   },
   addressInfo: {
     type: Object as PropType<Partial<AddressEditInfo>>,
-      default: () => extend({}, defaultData),
+    default: () => extend({}, DEFAULT_DATA),
   },
   telValidator: {
     type: Function as PropType<(val: string) => boolean>,
@@ -110,7 +98,14 @@ export default defineComponent({
     type: Array as PropType<string[]>,
     default: () => [],
   },
-  },
+};
+
+export type AddressEditProps = ExtractPropTypes<typeof props>;
+
+export default defineComponent({
+  name,
+
+  props,
 
   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 { AddressEditSearchItem } from './AddressEditDetail';
+export type {
+  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 { ComponentPublicInstance } from 'vue';
-import { AreaProps } from './Area';
+import type { ComponentPublicInstance } from 'vue';
+import type { AreaProps } from './Area';
 
 export type AreaList = {
   city_list: Record<string, string>;