types: using exact component instance type (#9256)

src/address-edit/AddressEdit.tsx

@@ -16,14 +16,13 @@ import {
   isMobile,
   truthProp,
   createNamespace,
-  ComponentInstance,
 } from '../utils';
 
 // Composables
 import { useExpose } from '../composables/use-expose';
 
 // Components
-import { Area, AreaList, AreaColumnOption } from '../area';
+import { Area, AreaList, AreaColumnOption, AreaInstance } from '../area';
 import { Cell } from '../cell';
 import { Field } from '../field';
 import { Popup } from '../popup';
@@ -120,7 +119,7 @@ export default defineComponent({
   ],
 
   setup(props, { emit, slots }) {
-    const areaRef = ref<ComponentInstance>();
+    const areaRef = ref<AreaInstance>();
 
     const state = reactive({
       data: {} as AddressEditInfo,
@@ -158,7 +157,7 @@ export default defineComponent({
 
     const assignAreaValues = () => {
       if (areaRef.value) {
-        const detail = areaRef.value.getArea();
+        const detail: Record<string, string> = areaRef.value.getArea();
         detail.areaCode = detail.code;
         delete detail.code;
         extend(state.data, detail);

src/address-edit/AddressEditDetail.tsx

@@ -1,7 +1,7 @@
 import { PropType, ref, defineComponent } from 'vue';
 
 // Utils
-import { isAndroid, ComponentInstance, createNamespace } from '../utils';
+import { isAndroid, createNamespace } from '../utils';
 
 // Components
 import { Cell } from '../cell';
@@ -9,6 +9,7 @@ import { Field } from '../field';
 
 // Types
 import type { AddressEditSearchItem } from './types';
+import type { FieldInstance } from '../field/types';
 
 const [name, bem, t] = createNamespace('address-edit-detail');
 const android = isAndroid();
@@ -30,7 +31,7 @@ export default defineComponent({
   emits: ['blur', 'focus', 'input', 'select-search'],
 
   setup(props, { emit }) {
-    const field = ref<ComponentInstance>();
+    const field = ref<FieldInstance>();
 
     const showSearchResult = () =>
       props.focused && props.searchResult && props.showSearchResult;

src/area/Area.tsx

@@ -12,14 +12,14 @@ import {
 
 // Utils
 import { deepClone } from '../utils/deep-clone';
-import { pick, createNamespace, ComponentInstance, extend } from '../utils';
+import { pick, createNamespace, extend } from '../utils';
 import { pickerProps } from '../picker/Picker';
 
 // Composables
 import { useExpose } from '../composables/use-expose';
 
 // Components
-import { Picker } from '../picker';
+import { Picker, PickerInstance } from '../picker';
 
 // Types
 import type { AreaList, AreaColumnType, AreaColumnOption } from './types';
@@ -80,7 +80,7 @@ export default defineComponent({
   emits: ['change', 'confirm', 'cancel'],
 
   setup(props, { emit, slots }) {
-    const pickerRef = ref<ComponentInstance>();
+    const pickerRef = ref<PickerInstance>();
 
     const state = reactive({
       code: props.value,
@@ -235,7 +235,9 @@ export default defineComponent({
 
     const getValues = () => {
       if (pickerRef.value) {
-        const values = pickerRef.value.getValues().filter(Boolean);
+        const values = pickerRef.value
+          .getValues<AreaColumnOption>()
+          .filter(Boolean);
         return parseValues(values);
       }
       return [];

src/calendar/test/index.spec.ts

@@ -2,7 +2,7 @@ import { Calendar, CalendarDayItem } from '..';
 import { mount, later } from '../../../test';
 import { getNextDay, getPrevDay } from '../utils';
 import { now, minDate, maxDate } from './utils';
-import type { ComponentInstance } from '../../utils';
+import type { CalendarInstance } from '../types';
 
 test('should reset to default date when calling reset method', async () => {
   const defaultDate = [minDate, getNextDay(minDate)];
@@ -21,7 +21,7 @@ test('should reset to default date when calling reset method', async () => {
   await days[15].trigger('click');
   await days[18].trigger('click');
 
-  (wrapper.vm as ComponentInstance).reset();
+  (wrapper.vm as CalendarInstance).reset();
 
   wrapper.find('.van-calendar__confirm').trigger('click');
   expect(wrapper.emitted<[Date, Date]>('confirm')![0][0]).toEqual(defaultDate);
@@ -44,7 +44,7 @@ test('should reset to specific date when calling reset method with date', async
   await days[18].trigger('click');
 
   const newDate = [getPrevDay(maxDate), maxDate];
-  (wrapper.vm as ComponentInstance).reset(newDate);
+  (wrapper.vm as CalendarInstance).reset(newDate);
 
   wrapper.find('.van-calendar__confirm').trigger('click');
   expect(wrapper.emitted<[Date, Date]>('confirm')![0][0]).toEqual(newDate);

src/checkbox/demo/index.vue

@@ -2,7 +2,8 @@
 import { ref, reactive } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { useRefs } from '../../composables/use-refs';
-import { ComponentInstance } from '../../utils';
+import type { CheckboxInstance } from '../types';
+import type { CheckboxGroupInstance } from '../../checkbox-group';
 
 const i18n = {
   'zh-CN': {
@@ -56,8 +57,8 @@ const state = reactive({
 const activeIcon = 'https://img.yzcdn.cn/vant/user-active.png';
 const inactiveIcon = 'https://img.yzcdn.cn/vant/user-inactive.png';
 
-const group = ref<ComponentInstance>();
-const [refs, setRefs] = useRefs<ComponentInstance>();
+const group = ref<CheckboxGroupInstance>();
+const [refs, setRefs] = useRefs<CheckboxInstance>();
 
 const toggle = (index: number) => {
   refs.value[index].toggle();

src/count-down/demo/index.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import { ComponentInstance } from '../../utils';
 import { Toast } from '../../toast';
+import type { CountDownInstance } from '../CountDown';
 
 const i18n = {
   'zh-CN': {
@@ -31,7 +31,7 @@ const i18n = {
 
 const t = useTranslate(i18n);
 const time = ref(30 * 60 * 60 * 1000);
-const countDown = ref<ComponentInstance>();
+const countDown = ref<CountDownInstance>();
 
 const start = () => {
   countDown.value?.start();

src/datetime-picker/DatePicker.tsx

@@ -16,7 +16,6 @@ import {
   isDate,
   padZero,
   createNamespace,
-  ComponentInstance,
 } from '../utils';
 import {
   times,
@@ -30,7 +29,7 @@ import {
 import { useExpose } from '../composables/use-expose';
 
 // Components
-import { Picker } from '../picker';
+import { Picker, PickerInstance } from '../picker';
 
 // Types
 import { DatetimePickerColumnType, DatetimePickerType } from './types';
@@ -75,7 +74,7 @@ export default defineComponent({
       return undefined;
     };
 
-    const picker = ref<ComponentInstance>();
+    const picker = ref<PickerInstance>();
     const currentDate = ref(formatValue(props.modelValue));
 
     const getBoundary = (type: 'max' | 'min', value: Date) => {
@@ -218,8 +217,7 @@ export default defineComponent({
           case 'minute':
             return formatter('minute', padZero(value.getMinutes()));
           default:
-            // no default
-            return null;
+            return '';
         }
       });
 

src/datetime-picker/TimePicker.tsx

@@ -8,21 +8,14 @@ import {
 } from 'vue';
 
 // Utils
-import {
-  pick,
-  clamp,
-  extend,
-  padZero,
-  createNamespace,
-  ComponentInstance,
-} from '../utils';
+import { pick, clamp, extend, padZero, createNamespace } from '../utils';
 import { times, sharedProps, pickerKeys } from './utils';
 
 // Composables
 import { useExpose } from '../composables/use-expose';
 
 // Components
-import { Picker } from '../picker';
+import { Picker, PickerInstance } from '../picker';
 
 const [name] = createNamespace('time-picker');
 
@@ -66,7 +59,7 @@ export default defineComponent({
       return `${hour}:${minute}`;
     };
 
-    const picker = ref<ComponentInstance>();
+    const picker = ref<PickerInstance>();
     const currentDate = ref(formatValue(props.modelValue));
 
     const ranges = computed(() => [

src/dropdown-menu/demo/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, reactive, ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import { ComponentInstance } from '../../utils';
+import type { DropdownItemInstance } from '../../dropdown-item';
 
 const i18n = {
   'zh-CN': {
@@ -44,7 +44,7 @@ const i18n = {
   },
 };
 
-const item = ref<ComponentInstance>();
+const item = ref<DropdownItemInstance>();
 const t = useTranslate(i18n);
 
 const state = reactive({

src/image-preview/ImagePreview.tsx

@@ -18,7 +18,6 @@ import {
   Interceptor,
   callInterceptor,
   createNamespace,
-  ComponentInstance,
 } from '../utils';
 
 // Composables
@@ -27,7 +26,7 @@ import { useExpose } from '../composables/use-expose';
 
 // Components
 import { Icon } from '../icon';
-import { Swipe, SwipeToOptions } from '../swipe';
+import { Swipe, SwipeInstance, SwipeToOptions } from '../swipe';
 import { Popup, PopupCloseIconPosition } from '../popup';
 import ImagePreviewItem from './ImagePreviewItem';
 
@@ -88,7 +87,7 @@ export default defineComponent({
   emits: ['scale', 'close', 'closed', 'change', 'update:show'],
 
   setup(props, { emit, slots }) {
-    const swipeRef = ref<ComponentInstance>();
+    const swipeRef = ref<SwipeInstance>();
     const windowSize = useWindowSize();
 
     const state = reactive({

src/picker/types.ts

@@ -32,15 +32,15 @@ export type PickerColumn = PickerOption[] | PickerObjectColumn;
 
 export type PickerExpose = {
   confirm: () => void;
-  getValues: () => PickerOption[];
+  getValues: <T = PickerOption>() => T[];
   setValues: (values: string[]) => void;
   getIndexes: () => number[];
   setIndexes: (indexes: number[]) => void;
   getColumnIndex: (index: number) => number;
   setColumnIndex: (columnIndex: number, optionIndex: number) => void;
-  getColumnValue: (index: number) => PickerOption;
+  getColumnValue: <T = PickerOption>(index: number) => T;
   setColumnValue: (index: number, value: string) => void;
-  getColumnValues: (index: number) => PickerOption[];
+  getColumnValues: <T = PickerOption>(index: number) => T[];
   setColumnValues: (index: number, options: PickerOption[]) => void;
 };
 

src/search/Search.tsx

@@ -5,9 +5,8 @@ import {
   pick,
   extend,
   truthProp,
-  createNamespace,
   preventDefault,
-  ComponentInstance,
+  createNamespace,
 } from '../utils';
 import { fieldSharedProps } from '../field/Field';
 
@@ -15,7 +14,7 @@ import { fieldSharedProps } from '../field/Field';
 import { useExpose } from '../composables/use-expose';
 
 // Components
-import { Field } from '../field';
+import { Field, FieldInstance } from '../field';
 
 // Types
 import type { SearchShape } from './types';
@@ -48,7 +47,7 @@ export default defineComponent({
   emits: ['search', 'cancel', 'update:modelValue'],
 
   setup(props, { emit, slots, attrs }) {
-    const filedRef = ref<ComponentInstance>();
+    const filedRef = ref<FieldInstance>();
 
     const onCancel = () => {
       if (!slots.action) {

src/search/test/index.spec.ts

@@ -1,6 +1,6 @@
 import { Search } from '..';
 import { mount } from '../../../test';
-import type { ComponentInstance } from '../../utils';
+import type { SearchInstance } from '../types';
 
 test('should emit update:modelValue event when input value changed', () => {
   const onUpdateModelValue = jest.fn();
@@ -126,7 +126,7 @@ test('should call input.focus when vm.focus is called', () => {
   const onFocus = jest.fn();
   wrapper.find('input').element.focus = onFocus;
 
-  (wrapper.vm as ComponentInstance).focus();
+  (wrapper.vm as SearchInstance).focus();
   expect(onFocus).toHaveBeenCalledTimes(1);
 });
 
@@ -135,6 +135,6 @@ test('should call input.blur when vm.blur is called', () => {
   const onBlur = jest.fn();
   wrapper.find('input').element.blur = onBlur;
 
-  (wrapper.vm as ComponentInstance).blur();
+  (wrapper.vm as SearchInstance).blur();
   expect(onBlur).toHaveBeenCalledTimes(1);
 });

src/tabs/TabsContent.tsx

@@ -1,6 +1,6 @@
 import { ref, watch, onMounted, defineComponent } from 'vue';
-import { ComponentInstance, createNamespace } from '../utils';
-import { Swipe } from '../swipe';
+import { createNamespace } from '../utils';
+import { Swipe, SwipeInstance } from '../swipe';
 
 const [name, bem] = createNamespace('tabs');
 
@@ -29,7 +29,7 @@ export default defineComponent({
   emits: ['change'],
 
   setup(props, { emit, slots }) {
-    const swipeRef = ref<ComponentInstance>();
+    const swipeRef = ref<SwipeInstance>();
 
     const onChange = (index: number) => emit('change', index);