vue-tsc: Fails to infer types for some components in v3.2.0 and later

[kakkokari-gtyih]

After updating vue-tsc to v3.2.0 or later, type inference has started failing within the template of a specific component, causing every objects (both externally imported objects and those defined within the <script setup>) in <template> to be represented as any.

I created a minimal reproduction that extracts the core characteristics of the component. However, they are functioning without issue:

• https://play.vuejs.org/#eNqdU01vm0AQ/StTDgFLLlRtTy52GiJLbQ9tlOYWcqB4wDjLLmIXasniv3f2AxtXdVvlBLvz5uu9twfvpmnCvkNv4cUyb6tGgUTVNcAyXi5TT8nUW6W8qhvRKrgVdXMDRStq8MPInHSy/yHlcWTTCUwHhXXDMoV0Aog3VW9+6NdWiOx9ZANxNIF7c+qZC15UZbiTgtNgBw1OvZxSK4btt0ZVgtNcCzARHcsYEz+/mDvVdjgf7/Mt5s9/uN/Jvb5LvbsWJbY9pt4xprK2RGXD6+9fcU//x2AtNh0j9F+C9ygF6/SMFpZ0fENjT3Bm2s+G0oqXD3K9V8jluJQeVCMHg089Ilizdmn107jvwvcmL+UDsXhUR0t7UY/t25UBxhH9uTsKQ/+6Kkj+phVNWKOUWYkSXi2Bd4zB1RWcBUKGvFRbWMEb4xZdxWmdQIu6kBYvWbPUg4UUNd5R+u/lKWZ9cXKG+f/RKSU4fMxZlT/rUkTfet8ISTKsbulgbJmAvYsji7/sMDr+2+kH6CQ+uKR7LGBwtnd2nzyI5OxBJOODSDm5WCrDFCytXuOqC3h0+ily0AL8T0iWsHWMHL7RfniizwCZPM++JvVdolQtOQiGxyfqOEy6Or6p8fkege8i/sygi47n2lNwYjWY2XYOGPYZ6/A61LKNAN3s7Mk7v5nl/8dvCa1wGI0Q1lkTBP0MlivoQ73YLNyJigf+HPzZMBy9+QI5N1hU3HSRENu9xraXWCQbmw0n5Ex3H8nh9MoxZKIM/FPY0IgbqLi1hmGZqBoHcUWOc9izVlkDp4QOvwDCeODr
• https://github.com/kakkokari-gtyih/vue-language-tools-type-inference-260105-repro

Since minimal reproduction is working (or I just poorly tested), I will also document issues with real-world components.
https://github.com/misskey-dev/misskey

This issue occurs in the MkNoteDetailed.vue component.
https://github.com/misskey-dev/misskey/blob/develop/packages/frontend/src/components/MkNoteDetailed.vue

I found that type inference in <template> is restored by performing one of the following actions:

• Remove the ref attribute from MkMediaList on line 114.
• Remove the mediaList attribute from MkMediaList on line 114.
• Pass an empty array to the mediaList attribute of MkMediaList on line 114.
  • However, adding proper type using as disables type inference again.
• Change the useTemplateRef call on line 327 to shallowRef<InstanceType<typeof MkMediaList>>();.

Given that this component is large, I assume that type tracking became impossible and it fell back to any. However, since this worked fine up to vue-tsc v3.1.8, I'm curious about where the problem lies. Thank you!

Corresponding Issues / PRs

misskey-dev/misskey#17062
misskey-dev/misskey#17027

[KazariEX]

You can install the VS Code extension Volar Labs, paste the virtual code of that sfc into a temporary .ts file next to it and check for type issues.

[KazariEX]

It's likely a circular reference issue caused by the type inference of template refs.

[kakkokari-gtyih]

Using Volar Labs to investigate, this was exactly the issue—a method call with a reference to exposed interface of MkMediaList was being made directly, causing a circular reference.
Fixing the call like this restored type inference:

const galleryEl = useTemplateRef('galleryEl');

const keymap = {
    'o': () => galleryEl.value?.openGallery(),
} as const satisfies Keymap;

to this

const galleryEl = useTemplateRef('galleryEl');

const keymap = {
    'o': () => {
        galleryEl.value?.openGallery();
    },
} as const satisfies Keymap;

Thank you for letting me know about Volar Labs, this is very useful

[kakkokari-gtyih]

Hi @KazariEX, thank you for addressing my question! It helps me a lot.

I found out that type inference using useTemplateRef stops working when props are passed from a parent to a component that has exposed values defined using defineExpose. I created a separate minimal reproduction for this and confirmed it's failing because of circular reference: https://github.com/kakkokari-gtyih/vue-language-tools-260106-repro

Is this a bug in vue-tsc, or is it by design? Or perhaps it's because my code doesn't follow best practices?

[KazariEX]

It's a design limitation. If your code inevitably leads to circular references due to template refs, it's recommended to manually annotate the component type in useTemplateRefs.

[kakkokari-gtyih]

Got it, thank you!