What is the correct typing for ref<some component> so that refVar.value.$el is not typed as any?

[bbugh]

When attempting to get the clientWidth of a subcomponent, I ran into an issue with typing, where even when the ref itself has the correct type, $el is seen by TypeScript as any. I've scoured the internet and the LLMs looking for an answer and haven't found one yet.

Question: What is the correct typing for ref when getting the ref of a component so that $el is correctly typed as HTMLElement (without manually specifying it)?

Here is an example:

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import SomeComponent from '@/components/SomeComponent.vue'

// const element = ref() // ❌ TypeScript see Ref<any>
// const element = ref<HTMLElement>() // ❌ Incorrect because it's a proxy
// const element = ref<InstanceType<typeof SomeComponent>>() // ❌ close but $el is `any`
const element = ref<???>()

onMounted(() => {
  if (!element.value) {
    throw new Error('element not found')
  }

  // This works but TypeScript sees $el as `any`
  console.log(element.value.$el.clientWidth) 
})
</script>

<template>
  <SomeComponent ref="element" />
</template>

[Alfred-Skyblue]

In the ComponentPublicInstance type, $el is defined as the any type.

core/packages/runtime-core/src/componentPublicInstance.ts

Line 218 in 4d94ebf

$el: any

See #7915 (comment)

[Shyam-Chen]

<script lang="ts" setup>
import type { ComponentExposed } from 'vue-component-type-helpers';
import { nextTick, ref, onMounted } from 'vue';

const target = ref<ComponentExposed<typeof Comp>>();

onMounted(() => {
  nextTick(() => {
    const el = target.value?.$el as HTMLElement;
    console.log(el?.clientWidth);
  });
});
</script>

[JosXa]

I've been helping myself with a simple ref<{ $el: HTMLSomeElement }>(), which is sorta ugly but does the trick

[HenrijsFF]

Isn't there any better way now?