Generics Inferencing Breaks with & extended objects

[crutchcorn]

Vue - Official extension or vue-tsc version

2.2.0

VSCode version

1.96.4

Vue version

3.5.13

TypeScript version

5.7.3

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (24) x64 AMD Ryzen AI 9 HX 370 w/ Radeon 890M
    Memory: 31.40 GB / 59.62 GB
  Binaries:
    Node: 20.18.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.14.4 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (131.0.2903.112)

package.json dependencies

"dependencies": {
	"vue": "^3.5.13"
},
"devDependencies": {
	"@vitejs/plugin-vue": "^5.2.1",
	"typescript": "^5.7.3",
	"vite": "^6.0.11"
}

Steps to reproduce

If you set up a generic component with a type-cast like so:

<!-- Header.vue -->
<script setup lang="ts" generic="T extends keyof HTMLElementTagNameMap = 'h1'">
type Props = Partial<HTMLElementTagNameMap[T]> & {
	as?: T;
}

const props = defineProps<Props>();

const Component = props.as || "h1";
</script>

<template>
	<component :is="Component" v-bind="props" style="color: darkred">
		<slot />
	</component>
</template>

Then try to use it:

<!-- App.vue -->
<script setup lang="ts">
import Header from "./Header.vue";
</script>

<template>
  <Header as="h2">
    Testing
  </Header>
</template>

The as="h2" will warn you:

Type '"h2"' is not assignable to type '"h1"'.ts-plugin(2322)

What is expected?

No type error

What is actually happening?

A type error is given

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-aflytz5e?file=src%2Fmain.js,src%2FHeader.vue&terminal=dev

Any additional comments?

This also happens with the following syntax:

<!-- Header.vue -->
<script setup lang="ts" generic="T extends keyof HTMLElementTagNameMap = 'h1'">
const props = defineProps<
  Partial<HTMLElementTagNameMap[T]> & {
    as?: T;
  }
>();

const Component = props.as || 'h1';
</script>

<template>
  <component :is="Component" v-bind="props" style="color: darkred">
    <slot />
  </component>
</template>

[KazariEX]

It is caused by Prettify.