Bug: ref typings should be inferred from element tag

[shigma]

<template>
    <ul :ref="el => state.element = el"></ul>
</template>

<script lang="ts" setup>
    import { ref } from 'vue'
    const state = ref<{ element: Element }>({ element: null })
</script>

This will produce error because ComponentInternalInstance | Element cannot be assigned to Element.

However we can infer the real :ref is string | Ref<any> | ((ref: HTMLUListElement) => void) instead of string | Ref<any> | ((ref: ComponentInternalInstance | Element) => void) because ul is hard-coded.

---

Or, can we prevent the error message by <!-- @ts-ignore --> or something?

[johnsoncodehk]

You should define correct type param to ref, and make sure your vue version >= 3.2, because vue 3.1.5 has a type bug in this case.

<template>
  <ul :ref="el => state.element = el"></ul>
</template>

<script lang="ts" setup>
import { ref, ComponentInternalInstance } from 'vue'
const state = ref<{ element: ComponentInternalInstance | Element | null }>({ element: null })
</script>

Btw @ts-ignore already available:

<template>
  <ul :ref="el => {
    // @ts-ignore
    state.element = el
  }"></ul>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
// @ts-ignore
const state = ref<{ element: Element }>({ element: null })
</script>

[shigma]

You should define correct type param to ref, and make sure your vue version >= 3.2, because vue 3.1.5 has a type bug in this case.

The problem is, the CORRECT type param to ref is ToRef<Element>. If I use something else just to please volar, I will have to add a thousand more type conversions to rest of my code.

[johnsoncodehk]

If I use something else just to please volar, I will have to add a thousand more type conversions to rest of my code.

Please don't say that, you are not to please volar, you to please typescript. You can reproduce same errors in the *.ts.

// foo.tsx
import { ref } from 'vue'

const state = ref<{ element: Element }>({ element: null })
const _ul = <ul ref={el => state.element = el}></ul>