defineProps Props interface containing reference to imported type not allowed when using: importedType | someOtherType
Vue version
3.2.37
Link to minimal reproduction
Steps to reproduce
Create an interface in a different file Create a component with a defineProps using a interface, the interface containing a reference to the above interface type, then also make that property possible to be another type. Such as:
import Foo from './Foo' // Some type
interface Props { soup: Foo | string }
defineProps(...)
What is expected?
According to https://vuejs.org/guide/typescript/composition-api.html#syntax-limitations , The interface or object literal type can contain references to types imported from other files, which makes it seem that this is possible. It normally is possible with no errors when you solely use { soup: Foo }, However, when you use a | modifier, it breaks down.
What is actually happening?
When combining the type with an | , it will always Invalid prop: type check failed for prop "soup". Expected Null | String, got Number with value 1. , assuming it's anything other than the "string" type. In the above, you can tell that null was never allowed to be an acceptable value, which was odd.
System Info
System:
OS: Windows 10 10.0.22000
CPU: (12) x64 AMD Ryzen 5 3600X 6-Core Processor
Memory: 6.63 GB / 15.93 GB
Binaries:
Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.15 - C:\Program Files\nodejs\yarn.CMD
npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.22000.120.0), Chromium (98.0.1108.50)
Internet Explorer: 11.0.22000.120
npmPackages:
vue: 3.x.x => 3.2.37
Any additional comments?
Like I said, it is supposed to be allowed according to The interface or object literal type can contain references to types imported from other files. However, it breaks down if you use type | (any other type)
duplicated of https://github.com/vuejs/core/issues/4294