Vue3+TypeScript中如何无初始值初始化reactive响应式变量？

首先明确：reactive()的设计本身就不支持传入原始类型、null、undefined，它只能接收对象/数组/Map/Set这类引用类型做响应式转换，所以直接传null的写法从API设计层面就走不通。
你之前用let声明变量再赋值的写法不仅冗余，还存在响应式丢失的风险：如果后续不小心重新给workspaceReact赋新值，之前绑定的响应式关联会直接失效。

推荐方案：用ref替代实现（官方标准写法） #

ref天生支持持有任意类型的值，初始传null完全合法，后续赋值对象类型时会自动做深层响应式转换，类型标注也更简洁，不需要手动写UnwrapRef：

import { ref } from 'vue'
// 初始值设为null，联合类型标注即可
const workspaceReact = ref<ToolboxInfo | null>(null)

// 后续赋值直接修改.value，不需要额外包reactive，ref会自动做响应式转换
workspaceReact.value = toolbox

注意：模板中访问ref值不需要手动写.value，只有<script>逻辑块中访问才需要加.value，这是Vue3的标准使用方式，类型推导完全正常，不会出现响应式丢失问题。

特殊场景方案：必须用reactive时的写法 #

如果你的业务场景必须使用reactive、不想引入ref，可以通过包裹一层对象属性的方式绕开初始值限制：

import { reactive } from 'vue'
// 把目标值作为对象的一个属性初始化
const workspaceReact = reactive<{ current: ToolboxInfo | null }>({
  current: null
})

// 后续赋值
workspaceReact.current = toolbox

这种写法本质和ref的内部实现逻辑类似，但写法比ref繁琐，非必要不推荐。

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