types: improve ref typing (#8182)

src/address-edit/Detail.tsx

@@ -1,7 +1,7 @@
 import { PropType, ref } from 'vue';
 
 // Utils
-import { createNamespace } from '../utils';
+import { ComponentInstance, createNamespace } from '../utils';
 import { isAndroid } from '../utils/validate/system';
 
 // Components
@@ -31,7 +31,7 @@ export default createComponent({
   emits: ['blur', 'focus', 'input', 'select-search'],
 
   setup(props, { emit }) {
-    const field = ref();
+    const field = ref<ComponentInstance>();
 
     const showSearchResult = () =>
       props.focused && props.searchResult && props.showSearchResult;
@@ -42,7 +42,7 @@ export default createComponent({
     };
 
     const onFinish = () => {
-      field.value.blur();
+      field.value!.blur();
     };
 
     const renderFinish = () => {

src/address-edit/index.tsx

@@ -1,7 +1,7 @@
 import { ref, watch, computed, nextTick, reactive, PropType } from 'vue';
 
 // Utils
-import { createNamespace, isObject } from '../utils';
+import { ComponentInstance, createNamespace, isObject } from '../utils';
 import { isMobile } from '../utils/validate/mobile';
 
 // Composition
@@ -113,7 +113,7 @@ export default createComponent({
   ],
 
   setup(props, { emit, slots }) {
-    const areaRef = ref();
+    const areaRef = ref<ComponentInstance>();
 
     const state = reactive({
       data: {} as AddressInfo,

src/calendar/components/Month.tsx

@@ -55,8 +55,8 @@ export default createComponent({
 
   setup(props, { emit }) {
     const [visible, setVisible] = useToggle();
-    const daysRef = ref();
-    const monthRef = ref();
+    const daysRef = ref<HTMLElement>();
+    const monthRef = ref<HTMLElement>();
     const height = useHeight(monthRef);
 
     const title = computed(() => formatMonthTitle(props.date));
@@ -82,7 +82,7 @@ export default createComponent({
       const el = props.showSubtitle ? daysRef.value : monthRef.value;
 
       const scrollTop =
-        el.getBoundingClientRect().top -
+        el!.getBoundingClientRect().top -
         body.getBoundingClientRect().top +
         body.scrollTop;
 

src/calendar/index.tsx

@@ -174,7 +174,7 @@ export default createComponent({
 
     let bodyHeight: number;
 
-    const bodyRef = ref();
+    const bodyRef = ref<HTMLElement>();
 
     const state = reactive({
       subtitle: '',
@@ -219,7 +219,7 @@ export default createComponent({
     // calculate the position of the elements
     // and find the elements that needs to be rendered
     const onScroll = () => {
-      const top = getScrollTop(bodyRef.value);
+      const top = getScrollTop(bodyRef.value!);
       const bottom = top + bodyHeight;
 
       const heights = months.value.map((item, index) =>

src/datetime-picker/DatePicker.tsx

@@ -2,7 +2,13 @@ import { ref, watch, computed, nextTick, onMounted, PropType } from 'vue';
 
 // Utils
 import { isDate } from '../utils/validate/date';
-import { pick, range, padZero, createNamespace } from '../utils';
+import {
+  pick,
+  range,
+  padZero,
+  createNamespace,
+  ComponentInstance,
+} from '../utils';
 import {
   times,
   ColumnType,
@@ -57,7 +63,7 @@ export default createComponent({
       return props.minDate;
     };
 
-    const picker = ref();
+    const picker = ref<ComponentInstance>();
     const currentDate = ref(formatValue(props.modelValue));
 
     const getBoundary = (type: 'max' | 'min', value: Date) => {
@@ -207,13 +213,13 @@ export default createComponent({
       });
 
       nextTick(() => {
-        picker.value.setValues(values);
+        picker.value!.setValues(values);
       });
     };
 
     const updateInnerValue = () => {
       const { type } = props;
-      const indexes = picker.value.getIndexes();
+      const indexes = picker.value!.getIndexes();
 
       const getValue = (type: ColumnType) => {
         let index = 0;

src/index-anchor/index.tsx

@@ -26,7 +26,7 @@ export default createComponent({
       active: false,
     });
 
-    const root = ref();
+    const root = ref<HTMLElement>();
     const { parent } = useParent<IndexBarProvide>(INDEX_BAR_KEY);
 
     if (!parent) {

src/index-bar/index.tsx

@@ -75,7 +75,7 @@ export default createComponent({
 
   setup(props, { emit, slots }) {
     const root = ref<HTMLElement>();
-    const activeAnchor = ref();
+    const activeAnchor = ref('');
 
     const touch = useTouch();
     const scrollParent = useScrollParent(root);

src/search/index.tsx

@@ -1,7 +1,12 @@
 import { ref, PropType, CSSProperties } from 'vue';
 
 // Utils
-import { pick, createNamespace, preventDefault } from '../utils';
+import {
+  pick,
+  createNamespace,
+  preventDefault,
+  ComponentInstance,
+} from '../utils';
 
 // Composition
 import { useExpose } from '../composables/use-expose';
@@ -44,7 +49,7 @@ export default createComponent({
   emits: ['update:modelValue', 'search', 'cancel'],
 
   setup(props, { emit, slots, attrs }) {
-    const filedRef = ref();
+    const filedRef = ref<ComponentInstance>();
 
     const onCancel = () => {
       if (!slots.action) {

src/tabs/TabsContent.tsx

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