VUE 中不能将类型“R[]”分配给类型“UnwrapRefSimple＜R＞[]”

摘要：本文针对 Vue 3 + TypeScript 中泛型 ref 赋值报错 不能将类型"R[]"分配给类型"UnwrapRefSimple<R>[]" 的问题，分析了其根源在于 ref 的深度响应类型解包与泛型约束之间的冲突，并给出两种解决方案：方案一为 ref 不传初始值（影响最小），方案二为使用 shallowRef 配合 triggerRef 手动触发更新；最后补充了 toRaw 在需要绕过响应式代理、直接操作原始数据场景下的用法。

"R\[\]"分配给类型"UnwrapRefSimple\[\]

问题背景

在 Vue 3 + TypeScript 项目中，当我们封装一个泛型组合式函数，并尝试把接口返回的数组赋值给 ref 时，经常会遇到下面这类类型报错：

ts 复制代码

export const useSelect11 = <T = void, R extends ISelect = ISelect>(api: (data?: T) => Promise<R[]>) => {
    const selectData = ref<R[]>([]);  
    const refresh = async (data?: T) => { 
        const res = await api(data);
        selectData.value = res as R[];  
        /**
        就算断言也报错
        不能将类型"R[]"分配给类型"UnwrapRefSimple<R>[]"。
	  		不能将类型"R"分配给类型"UnwrapRefSimple<R>"。
	    		不能将类型"ISelect"分配给类型"UnwrapRefSimple<R>"。
	       */
    }; 
    return { selectData,   refresh  };
}

报错原因分析

这个报错的根源在于 Vue 3 的 ref 类型解包机制 与 TypeScript 泛型约束 之间的冲突。

ref 在类型层面会被 UnwrapRef 递归解包，ref<R[]> 实际推导出的类型是 UnwrapRefSimple<R>[]，而不是 R[]。
当 R 是一个泛型参数（仅约束为 ISelect）时，TypeScript 无法在编译期确定 R 的具体结构，因此无法安全地把 R[] 断言为 UnwrapRefSimple<R>[]。
简单说：泛型 + ref 深度响应类型解包 组合在一起，就容易触发这个类型不兼容的报错。

方案1

复制代码

    const selectData = ref<R[]>();  # 这样什么就不会报错了，不知有没有人那解惑的！我是用的就是该方案，这样的解决影响最小

方案二 shallowRef

下面提供两种可行的解决方案，分别适用于不同场景。

ts 复制代码

import { shallowRef, triggerRef } from 'vue';

const state = shallowRef({ count: 0 });
state.value.count++;
triggerRef(state); // ✅ 手动触发更新

其他场景可能用到 toRaw

除了上面两种方案，在某些场景下我们还可以借助 toRaw 来绕过响应式代理，直接操作原始数据。

ts 复制代码

const fileList = computed(() => { 
    // 1. 从响应式代理中获取原始数组
    const rawList = toRaw(selectData.value); 
    return rawList.filter((el) => el.name == 'ALL');
});

toRaw 会返回由 reactive 或 ref 创建的响应式代理所对应的原始对象。这在需要临时读取原始数据、避免触发响应式追踪，或需要把数据传给不期望收到代理对象的第三方库时非常有用。

VUE 中 不能将类型“R[]”分配给类型“UnwrapRefSimple＜R＞[]”

"R\[\]"分配给类型"UnwrapRefSimple\[\]

问题背景

报错原因分析

方案1

方案二 shallowRef

其他场景可能用到 toRaw

VUE 中不能将类型“R[]”分配给类型“UnwrapRefSimple＜R＞[]”