useTemplateRefs falsely returns boolean

[phil294]

Vue - Official extension or vue-tsc version

v2.1.6

VSCode version

1.89.1

Vue version

3.5.3

TypeScript version

Not installed. When I create and open a .ts file and run TypeScript: Select TypeScript Version..., I get offered 5.4.5. Not sure if this is what you're asking for since it wasn't retrievable without the ts file.

System Info

System:
    OS: Linux 6.1 Manjaro Linux
    CPU: (4) x64 Intel(R) Core(TM) i3-7100U CPU @ 2.40GHz
    Memory: 12.27 GB / 19.43 GB
    Container: Yes
    Shell: 5.2.32 - /bin/bash
  Binaries:
    Node: 18.20.4 - ~/.nvm/versions/node/v18.20.4/bin/node
    Yarn: 1.22.22 - /usr/bin/yarn
    npm: 10.7.0 - ~/.nvm/versions/node/v18.20.4/bin/npm
  Browsers:
    Chromium: 128.0.6613.119

package.json dependencies

"dependencies": {
    "@vscode/codicons": "^0.0.36",
    "@vueuse/core": "^10.1.2",
    "vue": "^3.2.13",
    "vue-virtual-scroller": "^2.0.0-alpha.1"
  },
  "devDependencies": {
    "@vue/cli": "^5.0.4",
    "@vue/cli-service": "~5.0.0"
  }

Steps to reproduce

I pasted the official example from https://vuejs.org/guide/essentials/template-refs.html#accessing-the-refs ("Accessing the refs") into VSCode;

<script setup>
import { useTemplateRef, onMounted } from 'vue'

// the first argument must match the ref value in the template
const input = useTemplateRef('my-input')

onMounted(() => {
  input.value.focus()
})
</script>

<template>
  <input ref="my-input" />
</template>

What is expected?

No error

What is actually happening?

Property 'value' does not exist on type 'boolean'. because input is in fact shown as boolean.

Link to minimal reproduction

No response

Any additional comments?

The sample is not using lang="ts" and the link says

When using TypeScript, Vue's IDE support and vue-tsc will automatically infer the type of inputRef.value based on what element or component the matching ref attribute is used on.

So I guess for some reason it could be expected that things don't work perfectly (it would be great if you could clarify that), but type boolean surely is a bug here?! I also don't understand where it comes from as hovering over useTemplateRefs reveals a Readonly<ShallowRef> return type.

[phil294]

Another problem:

Trying to fix the boolean value by making a type cast using JSDoc. The typing is one thing, but ts-plugin(1005) complaining about a missing ; here as if there were a syntax error (which there isn't) looks like another bug.

[Krakor92]

I encounter exactly the same problem when writing useTemplateRef inside a <script setup> as you did. However I get const mapEl: Readonly<ShallowRef<unknown>> when hovering over my variable inside an explicit setup() method (It doesn't infer the actual tag though)