<Transition> does not support :key binding when use v-for

[KawaiiZapic]

Vue version

3.3.4

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-xcl8cd

Steps to reproduce

<template>
  <transition v-for="i in 5" :key="i">
    {{ i }}
  </transition>
</template>

Run vue-tsc

What is expected?

Type check is passed.

What is actually happening?

error TS2345: Argument of type '{ key: number; }' is not assignable to parameter of type 'TransitionProps'.
  Object literal may only specify known properties, and 'key' does not exist in type 'TransitionProps'.

2   <transition v-for="i in 5" :key="i">
                               ~~~~

System Info

No response

Any additional comments?

Only <Transition> has this problem, <TransitionGroup> work fine

[WXperia]

use transition-group

[KawaiiZapic]

use transition-group

What if:

<script>
const list=[{
  id:0,
  type: "user"
}]
</script>
<template>
  <transition v-for=item in list :key=item.id :name="'transition-'+item.type"/>
</template>

[auvred]

It seems to be related to vuejs/language-tools#3340

Transition component is functional, I guess that this is what causes the error

core/packages/runtime-dom/src/components/Transition.ts

Lines 45 to 48 in 3127c41

	export const Transition: FunctionalComponent<TransitionProps> = (
	props,
	{ slots }
	) => h(BaseTransition, resolveTransitionProps(props), slots)

[LinusBorg]

Closing this here as its about the language tools

[KawaiiZapic]

Closing this here as its about the language tools

I don't think it is a language tools problem.
this is caused by bad type definition in core, we need modify the type definition of FunctionalComponent to inherit some Vue-reserved props like :key

[VytenisSidabras]

Faced this issue when updating an existing project to a Typescript setup so can add a few additional details:

• This error is not related to v-for as you get it without using them.
• TransitionProps does not inherit key prop, so it throws TS error that for the moment can be ignored with @vue-ignore
• Transitions with added :ref still work and render things properly.

[yyx990803]

This is a language tools issue - the error is no longer reproducible with latest versions of Vue and vue-tsc.