types: using exact component instance type (#9256)

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(() => [