因为 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.aa
console.log(num); // 0

Answer 1

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

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

Answer 2

const obj: IObj 这样试试

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

Answer 3

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

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>).value
console.log(num);