typescript - vue 3 & typescript - 当 ComputedRef<> 位于reactive() 内时无法访问它；

Question

interface Intf {
    prop: ComputedRef<string>;
}

const obj = {} as Intf;

console.log(obj.prop.value);

我有上面的代码，看起来和我预期的一样好。我可以访问 obj.prop.value并且 typescript 没有抛出错误。然而，当我把这个 ComputedRef<string>在另一个 react 性对象中，我无法检索它，因为 typescript 说 prop类型为 string而不是 ComputedRef<string> .让我们看看以下代码:

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`!!

Answer 1

computed是 refs 和所有 refs 一样，它们自动是 unwraped在用 reactive() 创建的对象内部使用时
这就是为什么TS告诉你re.obj.prop的原因是字符串类型 - 您不需要使用 .value要访问该值，只需使用 re.obj.prop