vue.js - 因为 vue 的 reactive 对象会自动对 ref 对象进行解包，所以导致了 ts 报错，有什么解决方法吗？

Question

• 当 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.aaconsole.log(num); // 0

Answer 1

目前没什么好的方式, 你可以追踪下这两个issue:

https://github.com/vuejs/core/issues/3478
https://github.com/microsoft/TypeScript/issues/43826

Answer 2

不知道这样能不能满足你的需求:

import type { Ref } from 'vue'import {ref, reactive} from 'vue'interface IObj {    count: Ref<number> | null;    arr: {        [key:string]: Ref<number>    } | null;    o?: {        oo: Ref<number>    }}const obj:IObj = reactive({    count: null,    arr: null})obj.count = ref(1)obj.arr = {    aa: ref(0),    bb: ref(1)}let num:number = (obj.arr.aa as Ref<number>).valueconsole.log(num); 

Answer 3

const obj: IObj 这样试试

不推荐使用 reactive() 的泛型参数，因为处理了深层次 ref 解包的返回值与泛型参数的类型不同。