为组合式函数与 Ref 添加类型
Ref 、ComputedRef 、组合式函数的带类型返回值，以及 MaybeRef
为组合式函数与 Ref 添加类型 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。
为组合式 API 添加类型
组合式函数本质上只是函数，而引用本质上只是带类型的容器。添加显式类型可以让组合式函数更安全地使用，并为调用方提供完整的自动补全。
推断 ref 类型
大多数情况下，TypeScript 会根据 ref 的初始值推断其类型。ref(0) 会自动成为 Ref<number>。
import { ref } from 'vue'
const count = ref(0) // Ref<number>
const name = ref('Coddy') // Ref<string>显式指定 ref 泛型
当初始值无法表达完整类型时，例如某个值起初为 null、之后变成对象，请传入显式泛型。
interface User { id: number; name: string }
const user = ref<User | null>(null)Ref 类型
Ref<T> 描述了一个可写的 ref，其 .value 类型为 T。当变量或函数参数接收 ref 时，可以使用它来添加类型注解。
import type { Ref } from 'vue'
function useDouble(n: Ref<number>) {
return computed(() => n.value * 2)
}ComputedRef 类型
computed 会返回只读的 ComputedRef<T>。为返回计算值的组合式函数添加类型注解时，请使用此类型。
import type { ComputedRef } from 'vue'
const doubled: ComputedRef<number> = computed(() => count.value * 2)为组合式函数返回值添加类型
为返回值结构添加类型注解，让使用者明确知道自己会得到什么。显式返回类型还可以起到记录组合式函数的作用。
import { ref, type Ref } from 'vue'
function useCounter(): { count: Ref<number>; increment: () => void } {
const count = ref(0)
const increment = () => count.value++
return { count, increment }
}让类型推断发挥作用
很多时候，您可以省略显式返回类型，让 TypeScript 自动推断。只有在需要稳定的公共契约时，才添加显式类型。
使用 MaybeRef 接受灵活输入
MaybeRef<T> 表示一个值既可能是普通的 T，也可能是 Ref<T>。这样，组合式函数就能接受任意一种形式。
import type { MaybeRef } from 'vue'
function useGreeting(name: MaybeRef<string>) {
// name could be 'Coddy' or ref('Coddy')
}使用 unref 解除包装
如果 x 是 ref，unref(x) 会返回 x.value；否则会直接返回 x 本身。将它与 MaybeRef 搭配使用，可以统一输入格式。
import { unref, type MaybeRef } from 'vue'
function useGreeting(name: MaybeRef<string>) {
const text = unref(name) // always a string
return 'Hello ' + text
}toValue：现代辅助函数
Vue 3.3 新增了 toValue，它既能解除 ref 的包装，也能调用获取器函数。这是统一 MaybeRefOrGetter 输入格式的首选方式。
import { toValue, type MaybeRefOrGetter } from 'vue'
function useLen(input: MaybeRefOrGetter<string>) {
return computed(() => toValue(input).length)
}为响应式对象添加类型
reactive 会直接推断对象类型，不需要 .value。如果需要显式类型，请使用对象接口为变量添加注解。
import { reactive } from 'vue'
interface State { count: number; name: string }
const state: State = reactive({ count: 0, name: '' })快速检查
测试您对组合式函数和 ref 类型的了解。
总结
您已经学会了为组合式 API 添加类型：
- ref 会推断类型；当初始值不足以表达类型时，使用 ref<T>()。
- 使用 Ref<T> 和 ComputedRef<T> 为 ref 和 computed 添加类型注解。
- 为组合式函数的返回值添加类型，形成清晰的契约。
- MaybeRef<T> + unref()/toValue() 可以接受灵活的输入。
常见问题解答
「为组合式函数与 Ref 添加类型」课时是免费的吗？
是的 — 「为组合式函数与 Ref 添加类型」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。
「为组合式函数与 Ref 添加类型」这节课中我会学到什么？
Ref 、ComputedRef 、组合式函数的带类型返回值，以及 MaybeRef 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Vue Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「为组合式函数与 Ref 添加类型」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Vue Academy 课中编写并运行代码吗？
能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。