the Ref type seem to unwrap deeply nested ref when it should not

[4dr1en]

I'm encountering a TypeScript error when trying to use a Ref inside an array of objects. In my code, r should be a Ref, but it's being treated as a boolean. Here's the simplified code:

import { ref, Ref } from 'vue';

type Foo = { r: Ref<boolean> }[];
const foo: Ref<Foo> = ref<Foo>([]);
console.log('foo', foo); 

Error:

Types of property 'r' are incompatible.
Type 'boolean' is not assignable to type 'Ref<boolean, boolean>'

[w2xi]

It's bascause Vue's type system automatically infers and unwraps nested ref types.

So there's no need to explicitly decalre the variable's type.

Vue's type system is smart enough to infer the correct type based on the value passed to ref()

Just simply write like this:

const foo = ref<Foo>([]);

It works, right ?

[Jannchie]

I’ve encountered a similar issue. A ref within a ref gets automatically unwrapped. This seems to be a confusing feature. As a solution, you can change the outer ref to a shallowRef, so the inner ref won’t be automatically unwrapped.