TypeScript with type-only props declaration: exclusion of an enum breaks the property check
Vue version
3.2.37
Link to minimal reproduction
https://stackblitz.com/edit/vitejs-vite-zgu6sg?file=src%2FPosition.vue
Steps to reproduce
- Use Type-only props declaration
- Create an enum and try to exclude one of element.
// Position.ts
export enum Position {
First = 'FIRST',
Second = 'SECOND',
Third = 'THIRD',
}
<!-- Child.vue -->
<script setup lang="ts">
import { Position } from './Position.ts';
type FirstAndSecond = Exclude<PositionList, PositionList.Third>; // PositionList.First | PositionList.Second
defineProps<{
position: FirstAndSecond;
}>();
</script>
<!-- Parent.vue -->
<script setup lang="ts">
import { Position } from './Position.ts';
</script>
<template>
<Child :position="Position.First" /> <!-- [Vue warn]: Invalid prop: type check failed for prop "position". Expected Object, got String with value "FIRST". -->
</template>
What is expected?
No warning error
What is actually happening?
[Vue warn]: Invalid prop: type check failed for prop "position". Expected Object, got String with value "FIRST".
System Info
System:
OS: Windows 10 10.0.19041
CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
Memory: 5.62 GB / 31.95 GB
Binaries:
Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - ~\.yarn\bin\yarn.CMD
npm: 8.1.3 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.19041.423.0)
Internet Explorer: 11.0.19041.1
npmPackages:
vue: ^3.2.37 => 3.2.37
Any additional comments?
This works perfectly when there is no exclusion and the enum is used directly.