Vue TSC 中处理 computed refs 的类型问题解析

在 Vue.js 的类型系统开发中，经常会遇到 computed refs 的类型处理问题。本文将通过一个典型场景，深入分析 Vue 类型系统中关于 computed 属性的处理机制。

问题背景

在 Vue 3 的组合式 API 中，我们经常会使用 computed 来创建计算属性。当这些计算属性作为对象的一部分存储在响应式系统中时，类型系统有时会出现预期之外的行为。

核心代码示例

import { computed, ComputedRef, UnwrapNestedRefs } from "vue";

interface ConcreteTest {
    val: ComputedRef<string>;
}

interface Store {
    registers: ConcreteTest[];
}

class StoreManager {
    public store: UnwrapNestedRefs<Store> = {
        registers: []
    };

    addRegisters(){
        const val = computed(() => { return "0xaa" });
        this.store.registers.push({ val }); // 类型错误
    }
}

类型系统行为分析

1. UnwrapNestedRefs 的作用
   UnwrapNestedRefs 是 Vue 提供的一个工具类型，它会自动解包嵌套的 ref 类型。这意味着它会将 ComputedRef<T> 转换为 T。

2. 类型冲突原因
   当使用 UnwrapNestedRefs<Store> 时，它会递归地解包所有属性。因此，ConcreteTest 中的 val: ComputedRef<string> 会被解包为 val: string，这就与实际的 { val } (其中 val 是 ComputedRef<string>) 产生了类型冲突。

解决方案

1. 直接使用计算值的解包形式
   可以通过访问 .value 来显式解包：

   this.store.registers.push({ val: val.value });
   

2. 避免过度解包
   如果不希望自动解包行为，可以移除 UnwrapNestedRefs 包装：

   public store: Store = {
       registers: []
   };
   

3. 使用 shallowRef 替代
   在实际应用中，如果只需要浅层响应性，可以使用 shallowRef 来避免深层解包带来的类型问题。

最佳实践建议

1. 明确区分响应式引用和普通值的使用场景
2. 在类型定义中谨慎使用 UnwrapNestedRefs，确保理解其解包行为
3. 对于需要保持 ref 结构的场景，考虑使用更精确的类型注解
4. 在组件间传递计算属性时，保持类型一致性

理解 Vue 类型系统的这些特性，可以帮助开发者更好地构建类型安全的 Vue 应用，避免在编译时出现意外的类型错误。