vue 3 的 computed 返回 ref，t 由 getter 返回值自动推导；显式泛型用于推导失效场景；对象式写法中 get 决定类型、set 参数需兼容；与 reactive 混用时须解包 .value。
Vue 3 的 computed 在 TypeScript 中的返回值类型推导是自动且可靠的，但需要理解它的底层机制和常见写法差异。
computed 的返回值类型由 getter 函数决定
computed(() => value) 返回的是 Ref<t></t>，其中 T 是 getter 函数的返回值类型，TypeScript 会自动推导。无需手动标注，除非返回值类型不明确或含联合/可选逻辑。
import { ref, computed } from 'vue'
const count = ref(0)
const double = computed(() => count.value * 2) // Ref<number>
const isActive = ref(true)
const status = computed(() => isActive.value ? 'online' : 'offline') // Ref
const user = ref(null)
const displayName = computed(() => user.value?.name ?? 'Anonymous') // Ref<string></string></number>
显式指定泛型适用于复杂或隐式类型丢失场景
当 TypeScript 推导出 any 或 unknown（例如从 any 类型源计算、或使用 as any 后），可手动传入泛型：
const raw = ref<any>({ id: 1 })
const id = computed<number>(() => raw.value?.id) // 显式声明为 number</number></any>
更推荐的做法是修正源头类型，而非绕过推导。
可写 computed 的类型需同时满足 get 和 set
使用对象形式 { get, set } 时，get 的返回类型决定 .value 类型，set 的参数类型应与之兼容：
const count = ref(10)
const cappedCount = computed({
get: () => Math.min(count.value, 100),
set: (val: number) => { count.value = Math.max(0, val) }
})
// cappedCount 类型为 Ref<number>，.value 可读可写</number>
set 的参数类型必须能赋值给 get 的返回类型，否则 TS 报错。
与 reactive/ref 混用时注意解包行为
computed 返回的是 Ref<t></t>，不是普通对象。若用于 reactive 声明的对象中，需确保字段类型匹配：
interface Form {
name: string
length: number // 注意：不能直接放 computed Ref<number>
}
const form = reactive<form>({
name: 'test',
length: computed(() => 5).value // ✅ 解包后赋值
})</form></number>
或者改用 toRefs 或保持为独立 computed 变量更清晰。
类型推导本身不复杂，关键在于保持 getter 函数返回值类型明确、避免 any 污染链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
