Description
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>Metadata
Metadata
Assignees
Type
Projects
Milestone
Relationships
Participants
Activity
KazariEX commentedon Feb 2, 2025
It is caused by
Prettify.fix: fixed vuejs#5159
Prettify<T>breaks generics inferencing #5424