types: improve ref typing (#8124)

* types: improve ref typing

* types: message

src/composables/use-height.ts

@@ -1,8 +1,8 @@
 import { useRect } from '@vant/use';
 import { Ref, ref, onMounted, nextTick } from 'vue';
 
-export const useHeight = (element: Element | Ref<Element>) => {
-  const height = ref();
+export const useHeight = (element: Element | Ref<Element | undefined>) => {
+  const height = ref<number>();
 
   onMounted(() => {
     nextTick(() => {

src/composables/use-placeholder.tsx

@@ -2,7 +2,7 @@ import { useHeight } from './use-height';
 import type { Ref } from 'vue';
 import type { BEM } from '../utils/create/bem';
 
-export function usePlaceholder(contentRef: Ref<Element>, bem: BEM) {
+export function usePlaceholder(contentRef: Ref<Element | undefined>, bem: BEM) {
   const height = useHeight(contentRef);
 
   return (renderContent: () => JSX.Element) => (

src/nav-bar/index.tsx

@@ -31,7 +31,7 @@ export default createComponent({
   emits: ['click-left', 'click-right'],
 
   setup(props, { emit, slots }) {
-    const navBarRef = ref();
+    const navBarRef = ref<HTMLElement>();
     const renderPlaceholder = usePlaceholder(navBarRef, bem);
 
     const onClickLeft = (event: MouseEvent) => {

src/notice-bar/index.tsx

@@ -46,8 +46,8 @@ export default createComponent({
     let contentWidth = 0;
     let startTimer: NodeJS.Timeout;
 
-    const wrapRef = ref();
-    const contentRef = ref();
+    const wrapRef = ref<HTMLElement>();
+    const contentRef = ref<HTMLElement>();
 
     const state = reactive({
       show: true,

src/popup/index.tsx

@@ -112,7 +112,7 @@ export default createComponent({
     let shouldReopen: boolean;
 
     const zIndex = ref<number>();
-    const popupRef = ref();
+    const popupRef = ref<HTMLElement>();
 
     const [lockScroll, unlockScroll] = useLockScroll(
       popupRef,

src/pull-refresh/index.tsx

@@ -52,7 +52,7 @@ export default createComponent({
   setup(props, { emit, slots }) {
     let reachTop: boolean;
 
-    const root = ref();
+    const root = ref<HTMLElement>();
     const scrollParent = useScrollParent(root);
 
     const state = reactive({

src/stepper/index.tsx

@@ -127,7 +127,7 @@ export default createComponent({
     };
 
     let actionType: 'plus' | 'minus';
-    const inputRef = ref();
+    const inputRef = ref<HTMLInputElement>();
     const current = ref(getInitialValue());
 
     const minusDisabled = computed(

src/toast/index.tsx

@@ -65,7 +65,7 @@ function parseOptions(message: string | ToastOptions): ToastOptions {
 function createInstance() {
   const { instance, unmount } = mountComponent({
     setup() {
-      const message = ref();
+      const message = ref('');
       const { open, state, close, toggle } = usePopupState();
 
       const onClosed = () => {