Tipado de composables y refs
Ref , ComputedRef , valores de retorno tipados de composables y MaybeRef
Tipado de composables y refs es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
Tipado de la Composition API
Los composables son simplemente funciones y los refs son contenedores con tipos. Añadir tipos explícitos hace que sus composables sean seguros de consumir y proporciona a quienes los usan un autocompletado completo.
Tipos inferidos de ref
La mayoría de las veces, TypeScript infiere el tipo de un ref a partir de su valor inicial. Un ref(0) se convierte automáticamente en un Ref<number>.
import { ref } from 'vue'
const count = ref(0) // Ref<number>
const name = ref('Coddy') // Ref<string>Genéricos explícitos de ref
Cuando el valor inicial no puede expresar el tipo completo, como ocurre con un valor que comienza siendo null pero se convierte en un objeto, pase un genérico explícito.
interface User { id: number; name: string }
const user = ref<User | null>(null)El tipo Ref
Ref<T> describe un ref modificable cuyo .value es de tipo T. Úselo para anotar variables o parámetros de funciones que reciben refs.
import type { Ref } from 'vue'
function useDouble(n: Ref<number>) {
return computed(() => n.value * 2)
}El tipo ComputedRef
Un computed devuelve un ComputedRef<T> de solo lectura. Use este tipo al anotar un composable que devuelve valores calculados.
import type { ComputedRef } from 'vue'
const doubled: ComputedRef<number> = computed(() => count.value * 2)Tipado del valor de retorno de un composable
Anote la estructura de retorno para que quienes consuman el composable vean exactamente qué reciben. Un tipo de retorno explícito también documenta el composable.
import { ref, type Ref } from 'vue'
function useCounter(): { count: Ref<number>; increment: () => void } {
const count = ref(0)
const increment = () => count.value++
return { count, increment }
}Dejar que funcione la inferencia
A menudo puede omitir el tipo de retorno explícito y dejar que TypeScript lo infiera. Añada un tipo explícito solo cuando quiera establecer un contrato público estable.
MaybeRef para entradas flexibles
MaybeRef<T> significa que un valor puede ser un T simple o un Ref<T>. Permite que los composables acepten cualquiera de las dos formas.
import type { MaybeRef } from 'vue'
function useGreeting(name: MaybeRef<string>) {
// name could be 'Coddy' or ref('Coddy')
}Desenvolver con unref
unref(x) devuelve x.value si x es un ref; de lo contrario, devuelve el propio x. Combínelo con MaybeRef para normalizar la entrada.
import { unref, type MaybeRef } from 'vue'
function useGreeting(name: MaybeRef<string>) {
const text = unref(name) // always a string
return 'Hello ' + text
}toValue: el helper moderno
Vue 3.3 añadió toValue, que desenvuelve refs y también llama a funciones getter. Es la forma recomendada de normalizar entradas MaybeRefOrGetter.
import { toValue, type MaybeRefOrGetter } from 'vue'
function useLen(input: MaybeRefOrGetter<string>) {
return computed(() => toValue(input).length)
}Tipado de objetos reactivos
reactive infiere directamente el tipo del objeto; no hace falta .value. Para tiparlo explícitamente, anote la variable con la interfaz del objeto.
import { reactive } from 'vue'
interface State { count: number; name: string }
const state: State = reactive({ count: 0, name: '' })Comprobación rápida
Compruebe sus conocimientos sobre el tipado de composables y refs.
Resumen
Ha aprendido a tipar la Composition API:
- ref infiere los tipos; use ref<T>() cuando el valor inicial no sea suficiente.
- Ref<T> y ComputedRef<T> sirven para anotar refs y computeds.
- Tipar los valores de retorno de los composables proporciona un contrato claro.
- MaybeRef<T> + unref()/toValue() aceptan entradas flexibles.
Preguntas frecuentes
¿La lección «Tipado de composables y refs» es gratis?
Sí — el texto completo de «Tipado de composables y refs» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Tipado de composables y refs»?
Ref , ComputedRef , valores de retorno tipados de composables y MaybeRef Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Tipado de composables y refs»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Configuración de TypeScript en proyectos Vue
- Props y emits tipados con defineProps/defineEmits
- Tipado de composables y refs
- Componentes Vue genéricos