Vue 3 响应式类型需显式标注泛型，ref 应写 ref<T>(val)，reactive 需配合接口定义，逻辑中必须用 .value 访问，解构用 toRefs，复杂场景结合 isRef/isReactive 类型守卫。
Vue 3 的响应式数据（ref、reactive、computed）在 TypeScript 中常出现类型“不准”或“丢失”，不是 TypeScript 不够强，而是 Vue 的代理机制与类型系统存在天然错位——TS 看到的是包装类型（如 Ref<string>），而你写代码时想用的是原始值（string）。掌握几个关键点，就能让类型既准确又不啰嗦。
ref 必须显式标注泛型，尤其初始值不明确时
TS 对 ref() 的自动推断在空值、null、undefined 或空数组场景下容易失效，导致后续赋值报错或类型过宽。
-
✅ 推荐写法：直接声明泛型，明确告诉 TS 你要什么
const user = ref<User | null>(null);const list = ref<Product[]>([]); -
❌ 避免写法：依赖推断
const user = ref(null);→ 推断为Ref<null>，后续赋User会类型冲突const list = ref([]);→ 推断为Ref<never[]>，无法 pushProduct
reactive 类型需靠接口定义，别靠推断
reactive() 返回的是代理对象，TS 默认不会解包嵌套属性。直接访问 state.profile.name 可能提示 “可能为 undefined”，即使你在接口里写了必填字段。
- 先定义完整接口：
interface State { profile: { name: string; age: number }; } - 再用泛型创建：
const state = reactive<State>({ profile: { name: '', age: 0 } }); - 不要在
reactive对象里嵌套ref，否则类型会变复杂；基础类型统一用ref
模板自动解包 ≠ 逻辑中自动解包
这是最易踩坑的一点：模板里写 {{ count }} 能直接读 count.value，但 JS/TS 逻辑中必须手动写 count.value，否则 TS 按 Ref<number> 校验，无法调用 .toFixed() 等方法。
立即学习“前端免费学习笔记（深入）”；
-
console.log(count.value.toFixed(2));✅ -
console.log(count.toFixed(2));❌ 报错：类型Ref<number>上不存在toFixed - 解构时要用
toRefs，否则会丢失响应性：const { count } = toRefs(state)，之后用count.value
运行时判断 + 类型守卫，应对泛型输入不确定
写工具函数或组合式函数时，参数可能是 ref、reactive 或普通值，仅靠类型注解不够，得结合运行时判断做类型收窄。
- 导入守卫函数：
import { isRef, isReactive } from 'vue'; - 示例函数：
function getValue<T>(input: MaybeRef<T>): T {<br> if (isRef(input)) return input.value;<br> if (isReactive(input)) return input as unknown as T;<br> return input;<br>} - 这样既能通过类型检查，又能兼容
ref(x)、reactive({x})、x三种传参方式
