I have a dropdown component and for the props you can either pass an array or string which it will use to get an array from my Pinia store. I tried making a type that allows either of the two options that looks like this:
type Union<T, U> = (T & Partial<U>) | (U & Partial<T>)
and I used it like this without any errors in VSCode whatsoever:
type PropsStore = { store: string }
type PropsArray = { array: any[] }
type StoreOrArray = Union<PropsArray, PropsStore>
const props = defineProps<StoreOrArray>()
But on the page Vite shows me this error:
[plugin:vite:vue] [@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility type
It's all on the same page, I've tried changing the names of the type and of the type parameters and it works on any other object, the only thing that works is substituting it out like this:
type StoreOrArray = (PropsStore & Partial<PropsArray>) | (PropsArray & Partial<PropsStore>)
which is fine I suppose but annoying if I want to reuse it.
So think it definitely must be to do with defineProps but I don't understand why the way I did it doesn't work. There is probably a very good explanation but when I googled it, there were almost no search results, so if there a for example a YouTube video on this that would go more in-depth that would be very helpful
Other info (please ask if there is something relevant I haven't listed):
Vue does not support generic types at the moment (vue@3.3.4)
(there is issue https://github.com/vuejs/core/issues/8482 )
(there is PR https://github.com/vuejs/core/pull/8511 )
The only ones are supported are hacked in via TS
const SupportedBuiltinsSet = new Set([
'Partial',
'Required',
'Readonly',
'Pick',
'Omit'
] as const)
// [@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility type
// /home/projects/vitejs-vite-1sv1xj/src/components/HelloWorld.vue
// 2 | import { ref } from 'vue'
// 3 |
// 4 | type Exactly<T> = T;
// | ^
type Exactly<T> = T;
defineProps<Exactly<{ msg: string }>>()
See https://github.com/vuejs/core/blob/main/packages/compiler-sfc/src/script/resolveType.ts#L528