Vue3 与 TypeScript 在响应式数据层面深度集成，ref、reactive、computed 等 API 均支持精准类型推导与显式泛型约束，配合 toRefs/toRef 可安全解构并保留类型与响应性。
Vue3 与 TypeScript 在响应式数据层面的联动，不是靠额外配置堆出来的，而是设计上就咬合紧密。核心在于组合式 API 的每个响应式函数都天然携带类型推导能力，配合 TS 的静态检查，让 类型错误在写代码时就暴露出来，而不是等运行时报错。
ref：基础值的类型推导与显式约束
ref 对基础类型（string、number、boolean）能自动推导，比如 const count = ref(0) 就是 Ref<number></number>。但一旦涉及对象或复杂结构，必须显式标注，否则会退化为 any，破坏类型安全。
- 推荐写法：用泛型明确类型，如
const user = ref<user null>(null)</user> - 避免写法：不加泛型又赋值为对象字面量，例如
const data = ref({ name: 'a', id: 1 })—— 此时 TS 推导出的是具体字面量类型，后续无法扩展属性 - 进阶技巧：搭配
shallowRef或customRef时，同样需用泛型声明类型，不能依赖自动推导
reactive：对象响应式的类型保障关键在初始值
reactive 要求传入一个对象，它的类型完全由你传入的对象字面量或接口决定。它不会像 ref 那样包裹一层，所以类型就是对象本身的结构。
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 安全写法：用接口定义再实例化，
const state = reactive<user>({ id: 0, name: '' })</user> - 风险点：直接
reactive({})会导致类型为Record<string any></string>，后续任何属性访问都失去提示和校验 - 注意嵌套：深层响应式对象中，数组、函数、Date 等类型需在接口中明确定义，否则可能被忽略或误判
computed：推导精准，但依赖源必须类型清晰
computed 的返回类型由其回调函数的返回值自动推导，前提是依赖的数据本身有明确类型。如果 ref 或 reactive 的类型模糊，computed 的结果也会模糊。
立即学习“前端免费学习笔记（深入）”；
- 示例：若
count = ref<number>(0)</number>，则computed(() => count.value * 2)自动是ComputedRef<number></number> - 手动标注场景：当计算逻辑含类型转换或条件分支时，可加泛型增强可靠性，如
computed<string>(() => String(state.id))</string> - getter/setter 模式：使用
{ get, set }形式时，set 的参数类型需与 get 返回类型一致，TS 会自动校验
toRefs / toRef：解构响应式对象时不丢失类型
从 reactive 对象中解构属性会丢失响应性，也容易丢类型。toRefs 和 toRef 就是为此设计的“安全出口”。
-
toRefs(state)把整个 reactive 对象转成一组 Ref，每个属性保持原有类型，且仍响应式 -
toRef(state, 'name')只取单个字段，类型与 state.name 严格一致，适合按需解构 - 常见误用：直接
const { name } = state→ name 是普通 string，非 Ref，修改不会触发更新，也没有类型保护
