UnwrapRef<T> causing typing errors

[alex-dow]

Environment: VSCode + Volar (takeover mode, whatever version was released on 2023-10-17), Vue 3.3.4

I am not sure how to work around this issue. I have this interface:

export interface ObjectHolder<T> {
    theObject: T
}

And in a Vue component, I have this code:

<script lang="ts" setup generic="T">

import { computed, ref } from 'vue';
import { ObjectHolder } from './ListTypes';

const props = defineProps<{
    modelValue: T[],
}>();

const savedItems = ref<ObjectHolder<T>[]>([]);

const addObject = (item: ObjectHolder<T>) => {
    savedItems.value.push(item);
}

</script>

I get the following error from the addObject function:

Argument of type 'ObjectHolder<T>' is not assignable to parameter of type '{ theObject: UnwrapRef<T>; }'. Types of property 'theObject' are incompatible.

One solution I've found is to do this:

savedItems.value.push(item as ObjectHolder<UnwrapRef<T>>);

but this seems ugly. Is there a better way of dealing with this issue?

thanks in advance

[so1ve]

This is likely a usage error instead of a bug:

https://play.vuejs.org/#eNqNUsGK2zAQ/ZWpLknAtVv2ljqGtgSyPXSXbaCHKAevPU6UypKQZDdg/O8d2cSbhmVZg8Ga957emxl37KsxcdsgW7LUFVYYDw59YzKuRG209dCBxQp6qKyuYUbUGVdcFVo5D7U7wCrg89kGpdTwW1tZfpgtuEqT8Tq6iA4eayNzj3QCSI+fs64bxH2fJnQaqkKZxkP7sdYlyhVnhHNGUJpMahYx78i6Eof45LSi1F3Qclbo2giJ9sF4QdE4W8KABCynZH9/DDVvG4wu9eKIxZ9X6id3DjXOHi06tC1yNmE+twf0I7z+9RPP9D2BlLyRxH4DfEKnZRMyjrRvjSop9hVvSHs/zF6ow9atzx6VuzQVggZmP/A5o318f6P1l7h38d2g46qnKeaxdzS86xVHUGIlFD5abVwETzdL/8ItbZJeoTzaKi8QHp5PWPiNliXadJuRK8HB1x9xxJawDbX+ok23QENBVbpwf6qa+hltFmXzBayu9OPP5fIWy3vavRv/sfTGb7fP5rv9YgoWlC+auM1lg7tP+3hKE3u9PhutUHmRS0gS2KDFa/lonJflKCDfuaDLlret/h83PIH2HqcL/zZobBp3HMzGhgJnGFvP+n8oCzeV

[thommeo]

@so1ve The link shows default basic setup - probably not what you initially shared, I suppose.

Here is a basic example of the same problem as posted originally.

https://play.vuejs.org/#eNqNUk1v2zAM/SuELnWAwNnQW+Z42IYA7Q5r0QW7RDm4Np04kyVBkt0Agf97Kan5RFE0QACLfOR7JN+e/dA67TtkU5bZ0jTagUXXaRCFXM84c5YzWKNE05T0XHCWc9m0WhkHezBYj+GlcOUGBqiNauGGet1wyWWppHWgjdIWZlBh3Uh89K9szyVAqyoU/wrR4fcpLLgc8mR0KjtlqZZIktAnPYUDNhAnyQhmeSQ6A4wh6UPiii3t37r2xEldskmcmqaih8NWi8IhvQCyzdd8vz/XMgzZhIK+6ohkY9oRqa6bdbq1StIiAyVnpWp1I9A8aNfQVJxNoxifK4RQL79DzBlSe4iXGyz/vxPf2p2PcfZo0KLpkbNjzhVmjS6m53//4I6+j0lS3wlCf5B8QqtE5zVG2M9OViT7DBfU3oejN3K9sPOdQ2kPQ3mhHjkEPGfkgF8fjH6Se5vehjq6BG2xSJ2l5V1668w3Y3jC+sJm37ihq9G/kQ5NXZQID89bLN2dEhWabOGvT2nP6zYYc95tFBsOtdkCaCkoK+v7Z7Jrn9HkY7JjdM9bffSlLXqs7un23tMkMLviW67yZLkaHYX5ylNN9N7yyyo9qkmdmu+0kihdUwiYTOAODZ6XR+KiqmIB8SYNNZtej3op1/887DNMB/y10FR3dhPI4kAeE9Y2sOEV659ryg==

[Adnan-kreiker]

Anyone found a solution to this? I also ended up having to cast the type using UnwrapRef type, which I could not find info about it in the docs 👀

[hubdidub]

When generics are involved, you should use the Ref type and not the generic arguments of ref.

// instead of this:
const foo = ref<ObjectHolder<T>[]>([]);

// do this:
const foo: Ref<ObjectHolder<T>[]> = ref([]);

Now it works as one would expect and there is no need to deal with UnwrapRef.
I learned it here when I encountered the same problem: vuejs/core#9564