类型“从不”上不存在属性“$el”

Question

I am working on a vue.js 3 project, where I need to refer/get a div element in my script by initially declaring a null reference like this const refRouterView = ref(null) and I am not sure how to make TypeScript aware of DomElement .

Markup updated

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

I was getting this error Object is possibly 'null' before adding ? to refRouterView.value? which seems like hack and I don't like it. And, after adding ? I started seeing this error Property '$el' does not exist on type 'never'.

I tried adding HTMLElement to const refRouterView: HTMLElement = ref(null); but that introduce this error Property 'value' does not exist on type 'HTMLElement'. which was not solved even after adding ? to refRouterView.value?

Please help!

More Info

Originally my question was using div(ref='refRouterView') and @Thomas's answer solves it but I was using router-view . Just for making my question easy to understanding I mentioned div instead of router-view and that confused us, hence the answer did not solve my issue.

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

Answer 1

If you ref a DOM node, you don't have an $el property, the ref directly points to the DOM node:
https://v3.vuejs.org/guide/composition-api-template-refs.html

And for the typescript part, you have to define the type like this as the refRouterView is a Proxy of a certain type:
const refRouterView = ref<HTMLDivElement>();

Then you can directly access the attributes:
refRouterView.value.offsetHeight

Answer 2

(this.$refs.refRouterView as Vue & { $el: () => any }).$el.offsetHeight

Please refer to it： Vetur bug or code error? “property '$el' does not exist on type 'SVGelement'