vue 3 & typescript - Cannot access ComputedRef<> when it is located inside a reactive();

user_6201547 0
Viewed 3192
interface Intf {
    prop: ComputedRef<string>;
}

const obj = {} as Intf;

console.log(obj.prop.value);

I have the above code which looks good as what I expected. I can access obj.prop.value and no error was thrown from typescript. However, when I put this ComputedRef<string> inside another reactive object, I cannot retrieve it back as typescript said the prop is in type string instead of ComputedRef<string>. Let see the following codes:

interface Intf {
    prop: ComputedRef<string>;
}

const re = reactive({
    obj: {} as Intf
});

console.log(re.obj.prop.value); // typescript shown error on this line, `re.obj.prop` is with type `string` instead of `ComputedRef<string>`. At the moment, I cannot retrieve `prop.value` by accessing `prop` as well, since prop is a `ComputedRef<string>` and I should get its value by accessing `prop.value`!!
reactive typescript-typings vuejs3 typescript reactive-programming
1 Answers

computed are refs and as all refs, they are automatically unwraped when used inside object created with reactive()

That's the reason why TS tells you re.obj.prop is of type string - you don't need to use .value to access the value, just use re.obj.prop

user_3812820
Related