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

[vzakharov]

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

yeah but that's basically same as typecasting. I mean, I know it's not typecasting per se, but you're just saying "hey, this is a Ref of this, trust me, which makes it typecasting “in spirit.” Besides, if you do pass something that gets unwrapped, you can get into runtime errors because the T in the unwrapped ref won't be the same.

I tried using something like

type DoesntNeedUnwrapping<T> = 
  T extends UnwrapRef<T>
    ? 
      UnwrapRef<T> extends T 
        ? T 
        : never
    : never;

It works from the usage point of view (you won't be able to pass an “unwrappable” object as T) — but it still infers the type as Ref<UnwrapRef<DoesntNeedUnwrapping<T>>>.

I feel like the only good solution here would’ve been if the ref shorthand itself accounted for such usage — otherwise we can just typecast or create our own helper functions that do the same, like:

export type DoesntNeedUnwrapping<T> = 
  T extends UnwrapRef<T>
    ? UnwrapRef<T> extends T 
      ? T 
      : never
    : never;

export function plainRef<T>(value: DoesntNeedUnwrapping<T>) {
  return ref(value) as Ref<T>;
};

const r1 = plainRef({ hello: 'world' }) // ok
const r2 = plainRef({ hello: ref('world') })
// Argument of type '{ hello: Ref<string>; }' is not assignable to parameter of type 'never'.

[JosXa]

Yeah, it's a workaround to a typing bug in the Vue TS compiler.

I'm going with the explicit Ref<T> type and a // @ts-expect-error: https://github.com/vuejs/language-tools/discussions/3677 ;)