如何为响应式代理的泛型类型属性赋值？

我试图创建一个可用于异步加载数据的类，该类的实例被用于Pinia仓库，并被Vue组件监听，以便在数据加载时实现UI自动更新。但我遇到了编译时错误：

Type 'T' is not assignable to type 'UnwrapRef | undefined'

相关代码：

export class AsyncData<T> {
    state: AsyncDataState
    data?: T

    constructor(request?: Promise<T>) {
        if (request) {
            this.state = AsyncDataState.Loading

            // use reactive proxy to modify state later in case anyone is listening
            const reactiveThis = reactive(this)

            request.then(d => {
                // got it
                reactiveThis.state = AsyncDataState.Loaded
                reactiveThis.data = d // <= ERROR
            },
            reason => {
                // no dice
                reactiveThis.state = (reason == DataError.NotFound ? AsyncDataState.NotFound : AsyncDataState.LoadFailed)
            })
        }
        else {
            this.state = AsyncDataState.New
        }
    }
}

我并非TypeScript或Vue3专家，但我认为应该可以将T类型的值赋值给响应式包装器上对应类型为T的属性。我遗漏了什么？

这个错误的核心是Vue的reactive函数会对对象属性类型自动执行**解包（UnwrapRef）**操作，导致reactiveThis.data的类型变为UnwrapRef<T> | undefined，而非原始定义的T | undefined。当T本身包含响应式类型（比如Ref、Reactive）时，直接赋值原始T类型的值就会触发类型不匹配。

以下是几种可行的解决方式：

方法1：显式指定reactive的类型 #

将reactiveThis的类型强制指定为AsyncData<UnwrapRef<T>>，让赋值操作的类型匹配：

const reactiveThis = reactive(this) as AsyncData<UnwrapRef<T>>

方法2：用ref替代reactive包装类实例 #

Vue的reactive对类实例的支持有限，改用ref包装整个实例，类型兼容性更好：

// 修改构造函数内的代码
const reactiveThis = ref(this)

request.then(d => {
    reactiveThis.value.state = AsyncDataState.Loaded
    reactiveThis.value.data = d // 类型匹配
}, reason => {
    reactiveThis.value.state = (reason == DataError.NotFound ? AsyncDataState.NotFound : AsyncDataState.LoadFailed)
})

方法3：遵循Pinia的异步状态管理范式 #

在Pinia中管理异步数据，更推荐直接结合ref和异步action，这种方式更贴合Pinia设计，也无需手动处理reactive的类型问题：

// Pinia仓库示例
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useAsyncDataStore = defineStore('asyncData', () => {
    const state = ref(AsyncDataState.New)
    const data = ref<T>()

    const fetchData = async (request: Promise<T>) => {
        state.value = AsyncDataState.Loading
        try {
            data.value = await request
            state.value = AsyncDataState.Loaded
        } catch (reason) {
            state.value = reason == DataError.NotFound ? AsyncDataState.NotFound : AsyncDataState.LoadFailed
        }
    }

    return { state, data, fetchData }
})

内容的提问来源于stack exchange，提问作者Bob Meyers