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

bbugh · 2023-10-30T18:03:09Z

bbugh
Oct 30, 2023

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 · 2023-11-30T13:52:44Z

Alfred-Skyblue
Nov 30, 2023
Collaborator

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)

0 replies

Shyam-Chen · 2023-12-01T02:56:29Z

Shyam-Chen
Dec 1, 2023

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