Conditional templates with named slots lose type checking #1150
Description
Issue
Templates that use both conditional rendering logic and v-slot lose type awareness on v-else code block. The type checking works fine on v-if and v-else-if code blocks. See reproduction here:
Screen.Recording.2022-04-07.at.1.13.44.PM.mov
Versions
VS Code: v1.66.0
Volar VS Code extension: v0.33.10
Typescript: v4.6.3
Vue: v3.2.25
Reproduction code
<script
setup
lang="ts"
>
import { ref } from 'vue';
import ComponentWithSlots from '@/src/foobar';
const aVariableThatExists = ref(true);
</script>
<template>
<ComponentWithSlots>
<template
#content
v-if="aVariableThatExists"
>
<div>{{ aVariableThatExists }}</div>
</template>
<template
#content
v-else
>
<div>{{ thisVariableDoesNotExist }}</div>
<div>{{ thisShouldBeUnderlinedInRed }}</div>
</template>
</ComponentWithSlots>
</template>Temporary workaround
Move the conditional logic into the children of a single slotted template. Define an extra set of template tags that the conditional logic can live on:
<script
setup
lang="ts"
>
import { ref } from 'vue';
import ComponentWithSlots from '@/src/foobar';
const aVariableThatExists = ref(true);
</script>
<template>
<ComponentWithSlots>
<template
#content
>
<template v-if="aVariableThatExists">
<div>{{ aVariableThatExists }}</div>
</template>
<template v-else>
<div>{{ thisVariableDoesNotExist }}</div>
</template>
</template>
</ComponentWithSlots>
</template>