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

Question

interface Intf {
    prop: ComputedRef<string>;
}

const obj = {} as Intf;

console.log(obj.prop.value);

我有上面的代码，看起来和我预期的一样好。我可以访问obj.prop.value，并且打字稿没有抛出任何错误。但是，当我将这个ComputedRef<string> 放在另一个反应对象中时，我无法将其取回，因为打字稿说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，当在使用 reactive() 创建的对象内部使用时，它们会自动成为 unwraped

这就是为什么 TS 告诉你 re.obj.prop 是字符串类型的原因 - 你不需要使用 .value 来访问该值，只需使用 re.obj.prop