Subscribe on changes!

TypeScript with type-only props declaration: exclusion of an enum breaks the property check

avatar
Jul 11th 2022

Vue version

3.2.37

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-zgu6sg?file=src%2FPosition.vue

Steps to reproduce

// 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.