fallthroughAttributes breaks checking with dynamic components

[ferferga]

Vue - Official extension or vue-tsc version

2.1.6

VSCode version

1.92.2

Vue version

3.5.1

TypeScript version

5.5.4

System Info

No response

package.json dependencies

Listed the ones used in the reproduction

"devDependencies": {
  "@types/node": "22.5.2",
  "@vitejs/plugin-vue": "5.1.3",
  "typescript": "5.5.4",
  "vite": "5.4.2",
  "vue-tsc": "2.1.6"
},
"dependencies": {
  "vue": "3.5.1"
}

Steps to reproduce

1. Open the attached reproduction in StackBlitz.
2. Run npm run check. 2 errors will be reported
3. Transform the dynamic component from JTransition file to either Transition or TransitionGroup. Checking will pass as expected.

What is expected?

• The type of JTransition fallthroughAttributes is the union of the types of the :is expression in dynamic components (ideally, it also creates a type based on the truthiness of the passed expression if it depends on props, but probably that's a limitation impossible to be solved properly in all the underlying use cases. I think the union of them is fine already).
• Props are properly type checked regardless if the fallthroughAttributes's type have been properly resolved or not.

What is actually happening?

All the type information of the JTransition component is missing:

• The fallthrough attributes's type doesn't resolve to the result of the :is expression of the underlying component.
• Props are reporting a type error when the definitions are correct

Link to minimal reproduction

https://stackblitz.com/edit/vue3-vite-typescript-starter-ywtm6e?file=src%2FApp.vue

Any additional comments?

No response

[KazariEX]

This is a bug caused by some differences in Transition and other component types.

[ferferga]

@KazariEX Awesome to hear it should not be as difficult as initially expected to get this fixed! 🎉 Thank you very much for your triaging 🚀.

[KazariEX]

I suggest you can use DefineComponent<TransitionProps> to call it first, as the type of Transition imported directly from vue are not complete.

This applies to all built-in components, and by entering the source definition from <transition> and Transition, you will find that their types are not consistent.

workaround:

<script setup lang="ts">
import { Transition, TransitionProps, TransitionGroup, DefineComponent } from 'vue';

const VTransition = Transition as unknown as DefineComponent<TransitionProps>;
</script>

<template>
    <component :is="0 ? VTransition : TransitionGroup"></component>
</template>