ref with generic type

[hubdidub]

Hi,

I have difficulties trying to use a generic type with a ref.
This is an example of what I'm trying to do:

<script setup lang="ts" generic="T">
import { ref } from 'vue';

const props = defineProps<{
  foo: T
}>();

const myRef = ref<T | null>(null);

myRef.value = props.foo; // <- shouldn't this work?

</script>

The last line produces this error:

Type 'T' is not assignable to type 'UnwrapRef<T>'.ts(2322)
(property) Ref<UnwrapRef<T>>.value: UnwrapRef<T>

myRef has a weird type. My expection was that it stays T | null.
But it seems that when I put a generic in a ref, it gets wrapped in a UnwrapRef and I don't know how I can process that.

I am not sure if I'm missing something, or if I encountered a bug.

playground

[Alfred-Skyblue]

[hubdidub]

Good to know that I could use UnwrapRef like that. This solves the problem, but the other answer is more exactly what I was looking for :)

[LinusBorg]

When working with a generic type, it's better to use the Ref type than to pass a type argument to ref<>(). This works fine:

const myRef: Ref<T | null> = ref(null);

myRef.value = props.foo;

playground

The reason that this works is that, because of ref unwrapping, there is a difference between what goes into a ref function and what it returns as it's value.

ref<T | null>()  //=> resulting type: Ref<UnwrapRef<T>>

[hubdidub]

Thank you so much, I can get rid of many @ts-ignores now :D

[oswaldofreitas]

@LinusBorg why it doesn't work if I initialize the ref with the prop value?

const myRef: Ref<T | null> = ref(props.foo);

[bmulholland]

It's a bit heavy-handed, but this works:

const myRef = ref(props.foo) as Ref<T | null>;