Vue的ref无法维护嵌套私有属性类型，该如何解决？

核心原因 #

你遇到的类型报错，本质是两个问题叠加：

1. TypeScript 的 private 修饰符限制了属性只能在类内部访问，外部直接访问本身就不符合语法规范；
2. Vue 的 ref 在包装带有私有属性的类实例时，自动类型推导会丢失原始类的类型信息，被推断成空对象 {}。

最佳解决方案 #

1. 调整类的访问修饰符 + 显式指定 ref 泛型 #

这是最规范也最省心的方案：

• 如果需要在类外部访问属性，将 private 改为 public（或 protected，如果需要子类访问）；
• 给 ref 显式指定泛型类型，强制 TypeScript 识别原始类的类型。

修改后的代码：

class Bar {
    public val = 1; // 或保留private，根据你的访问需求决定
}

class Foo {
    public bar = new Bar(); // 改为public，允许外部访问
}

// 显式指定泛型<Foo>
const fooRef = ref<Foo>(new Foo());

const foo: Foo = fooRef.value; // 不再报错
const bar = fooRef.value.bar; // 正常访问
const baz = ref<Foo[]>([new Foo()]); 
const z = baz.value[0].bar.val; // 正常访问

2. 保留私有属性的场景（仅类内部访问） #

如果必须保留属性的 private 修饰符（仅允许类内部访问），只需给 ref 显式指定泛型即可解决类型推断问题：

class Bar {
    private val = 1;
}

class Foo {
    private bar = new Bar();
    
    // 类内部可以正常访问私有属性
    getBarVal() {
        return this.bar.val;
    }
}

// 显式指定泛型<Foo>
const fooRef = ref<Foo>(new Foo());
const fooVal = fooRef.value.getBarVal(); // 正常调用类方法获取内部值

3. 需深度响应式且保留私有属性的折中方案 #

如果用 shallowRef 能解决类型问题但需要深度响应式，可以结合 watch 手动监听内部属性变化：

import { shallowRef, watch } from 'vue';

const fooRef = shallowRef(new Foo());

// 开启深度监听，追踪私有属性的变化
watch(fooRef, () => {
    // 属性变化时自动触发响应式更新
}, { deep: true });

// 此时fooRef.value的类型为原始Foo类，不会被推断成{}

内容的提问来源于stack exchange，提问作者Eugene Barsky