types: improve ref typing (#8182)

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