Estoy trabajando en un proyecto vue.js 3 , donde necesito referir/obtener un elemento div en mi secuencia de comandos declarando inicialmente una referencia null como esta const refRouterView = ref(null) y no estoy seguro de cómo hacer que TypeScript sea consciente de DomElement .

Marcado actualizado

 <template lang="pug"> .flex router-view(ref='refRouterView') ... </template> <script lang="ts" setup> import { ref, onMounted } from 'vue'; const refRouterView = ref(null); const routerViewHeight = ref(500); const getRouterViewHeight = () => { setTimeout(() => { routerViewHeight.value = refRouterView.value?.$el.offsetHeight; }, 250); }; onMounted(() => getRouterViewHeight()); </script>

Recibí este error Object is possibly 'null' antes de agregar ? a refRouterView.value? que parece hack y no me gusta. Y, después de agregar ? Empecé a ver este error Property '$el' does not exist on type 'never'.

Intenté agregar HTMLElement a const refRouterView : HTMLElement = ref(null); pero eso introduce este error Property 'value' does not exist on type 'HTMLElement'. que no se resolvió incluso después de agregar ? a refRouterView.value?

¡Por favor ayuda!

Más información

Originalmente, mi pregunta estaba usando div(ref='refRouterView') y la respuesta de @Thomas lo resuelve, pero estaba usando router-view . Solo para hacer que mi pregunta sea fácil de entender, mencioné div en lugar de router-view y eso nos confundió, por lo tanto, la respuesta no resolvió mi problema.

 <template lang="pug"> .flex div(ref='refRouterView') ... </template>