Version

3.2.33

Reproduction link

sfc.vuejs.org/

Steps to reproduce

• Use Vue 3 + setup + Typescript
• Use defineProps() and set the properties via a Typescript generic
• Within Props use a union of an imported Interface and another type, .i.e

import MyInterface from './MyInterface.ts';
defineProps<{someProperty: MyInterface | string}>();

What is expected?

No warning, just Vue quietly allowing to set someProperty to either an Object of type MyInterface or a String.

What is actually happening?

Warning on browser console:

Invalid prop: type check failed for prop "someProperty". Expected Null | String, got Object

Somehow Vue seems to internally convert the type of MyInterface to Null instead of an Object of type MyInterface.

Notes

This doesn't happen if you use an Interface that has been defined in the same file/component as your defineProps<>(); So this is no general problem with union'izing custom Interfaces and basic types

interface MyInterface {
  foo: string;
}
defineProps<{someProperty: MyInterface | string}>();

This doesn't happen if you just use the Interface without union; So this is no general problem with imported Interfaces

import MyInterface from './MyInterface.ts';
defineProps<{someProperty: MyInterface}>();

Only the combination of imported Interface and union is problematic.

this is not support yet. see #4294