ref loses type when given a default value

[JammingBen]

I have the following code snippet:

type FooType = {
    id: string
}

const bar = ref<FooType>()

Now bar is of type Ref<FooType>:

However, when I initialize bar with a default value, let's say null, TypeScript can't get the FooType anymore:

Can someone explain me why/what is happening here? I noticed that const bar: Ref<FooType> = ref(null) would still have the correct type. Is it recommended to use the Ref type when not working with primitives? I saw the recommendation in https://github.com/orgs/vuejs/discussions/9564#discussioncomment-7518938, but the discussion seems to be about generic types only.

[rramsey]

Kinda newbie here, but it seems like what you want is:

const bar: Ref<FooType | null> = ref(null);
const foo = ref<FooType | null>(null);

Because FooType and null are different types, so when you say bar is a FooType and then assign null, you've essentially lied to typescript, so it doesn't know what type it should be.

Personally I like assigning the type on the variable declaration side of the equals sign: const bar: Ref<FooType | null> . I don't know what the exact terminology is for that. Note that if you do, you need capital Ref or ComputedRef and you will need to import them like import { type ComputedRef, type Ref, ref } from 'vue'.

[JammingBen]

ref<FooType | null>(null) still results in TypeScript inferring the wrong type unfortunately. Any default value seems to interfere here, same with e.g. an empty array: const foo = ref<FooType[]>([]) results in the same issue.

For now I'm also using foo: Ref<...>. I'm just wondering why it behaves like that 🤔

[rramsey]

Well shoot. That was my only guess. :(