因为 vue 的 reactive 对象会自动对 ref 对象进行解包,所以导致了 ts 报错,有什么解决方法吗?
- 当 ref 对象作为 reactive 对象的属性,在定义 reactive 对象获取其类型时或读取 reactive 对象的 ref 属性时都会对 ref 对象进行自动的解包,因此就出现了以下的 ts 报错
- 实际上下面的两个报错都是符合 vue 的特性的,并没有问题
- 有没有什么办法可以让这两种情况可以正确的识别类型,或者说可以让这两种情况不报错(之前一种用 as any 和 as unknown as xxx 来解决,感觉是在是太丑陋了)
import type { Ref } from 'vue'
import {ref, reactive} from 'vue'
interface IObj {
count: Ref<number> | null;
arr: {
// 如果是这种自定义属性的对象类型则不会在 reactive 返回值的类型中进行解包
[key:string]: Ref<number>
} | null;
o?: {
oo: Ref<number>
}
}
const obj = reactive<IObj>({
count: null,
arr: null
})
/*
reactive 返回值的类型
const obj: {
count: number | null;
arr: {
[key: string]: Ref<number>;
} | null;
o?: {
oo: number;
} | undefined;
}
*/
// 这里ts报错: 不能将类型“Ref<number>”分配给类型“number”
obj.count = ref(1)
obj.arr = {
aa: ref(0),
bb: ref(1)
}
// 这里ts报错: 不能将类型“Ref<number>”分配给类型“number”
let num:number = obj.arr.aa
console.log(num); // 0
回复
1个回答

test
2024-06-24
目前没什么好的方式, 你可以追踪下这两个issue:
https://github.com/vuejs/core/issues/3478https://github.com/microsoft/TypeScript/issues/43826
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容