Referencing useTemplateRef value inside computed and using computed in template results in TS error

[mdoesburg]

Vue - Official extension or vue-tsc version

2.1.10

VSCode version

1.95.3

Vue version

3.5.13

TypeScript version

5.4.5

System Info

System:
    OS: macOS 14.7.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 138.00 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
    pnpm: 9.14.2 - ~/Library/pnpm/pnpm
    Watchman: 2022.12.05.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 131.0.6778.86
    Edge: 131.0.2903.63
    Safari: 18.1.1

package.json dependencies

No response

Steps to reproduce

1. Create the following components:

<!-- TestComponent1.vue -->
<script setup lang="ts">
import { computed, useTemplateRef } from 'vue';

import TestComponent2 from './TestComponent2.vue';

const field = useTemplateRef('field');
const focused = computed(() => field.value?.focused);
</script>

<template>
    <TestComponent2 ref="field" :class="{ 'component--focused': focused }" />
</template>

<!-- TestComponent2.vue -->
<script setup lang="ts">
import { ref } from 'vue';

const focused = ref(false);

defineExpose({ focused });
</script>

<template>
    <p>Hello World!</p>
</template>

2. See the following error: 'field' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer. ts-plugin(7022)

What is expected?

Using ref you can do something like this:

<!-- TestComponent1.vue -->
<script setup lang="ts">
import { computed, ref } from 'vue';

import TestComponent2 from './TestComponent2.vue';

const field = ref<InstanceType<typeof TestComponent2>>();
const focused = computed(() => field.value?.focused);
</script>

<template>
    <TestComponent2 ref="field" :class="{ 'component--focused': focused }" />
</template>

What is actually happening?

Simply replacing ref with useTemplateRef doesn't work in this case.

A feasible workaround in this case could be something like this:

<!-- TestComponent1.vue -->
<script setup lang="ts">
import { ref, useTemplateRef, watchEffect } from 'vue';

import TestComponent2 from './TestComponent2.vue';

const field = useTemplateRef('field');

const focused = ref(false);

watchEffect(() => {
    focused.value = field.value?.focused ?? false;
});
</script>

<template>
    <TestComponent2 ref="field" :class="{ 'component--focused': focused }" />
</template>

The question is if this is just an implementation/TypeScript limitation or if something can be done to make this work with useTemplateRef.

Link to minimal reproduction

No response

Any additional comments?

No response

[KazariEX]

This actually creates a circular reference, since the field comes from the <... ref="field" />, and you referenced the derived value of field inside that element. Please avoid this usage.

[yimme]

I might be misunderstanding but in my case it seems to work to replace ref with useTemplateRef<InstanceType<typeof ComponentName>> and inheriting the typing in the computed property.

Reproduction link