Version

3.2.21

Reproduction link

sfc.vuejs.org/

Steps to reproduce

Copy reproduction code to VSCode

What is expected?

props.foo.bar should be string

What is actually happening?

props.foo.bar is Ref<string>

You should just not type your prop with Ref<string> in the first place, as you receive an unwrapped object.

How about using UnwrapRef to wrap props to avoid this problem? Then, we can get correct type.

I don't see a problem. If you correctly type your props like this, there's no problem:

type Foo = { bar: string };

reactive data is unwrapped, so the interface of the object it returns does not contain Ref - why do you want to use it, then?

Yes, I can indeed modify props type to solve this problem.

However, this is a bit counter-intuitive, I think Vue should automatically unwrap for props. Just like reactive will automatically unwrap.

The whole point of reactive() unwrapping nested refs (insofar as types are concerned) is so you can have a type like { bar: string} and don't need a type of {bar: Ref<string>}

Your component clearly expects a prop called foo containing an object with an interface of {bar: string}, because you expect that you can do:

props.foo.bar // => string

...as you demonstrate in your code above.

So why do you want to type the props as { bar: Ref<string>} and then have it implicitly unwrapped? To me, that would be confusing.

Furthermore, if we did always unwrap all props, we could not correctly type a prop receiveing a plain object, shallowReactive or shallowRef containing a nested ref - as those would not be unwrapped at runtime.

I see. Thank you very much.