Vue 50: TypeScript con Vue
easy⏱ 5 mincoursevue
Refs y composables tipados
Un Ref<T> es solo el tipo de lo que retorna ref(), con el tipo de su .value fijado explícitamente. Un composable tipado declara la forma exacta de lo que retorna, así que quien lo use en otro componente obtiene autocompletado y un error de tipo si algo no encaja.
import type { Ref } from 'vue';
import { ref } from 'vue';
function useCounter(initial: number): { count: Ref<number>; increment: () => void } {
const count: Ref<number> = ref(initial);
const increment = () => { count.value++; };
return { count, increment };
}
Props tipadas: dos sabores
En <script setup>, defineProps<{...}>() recibe la forma de las props como un argumento de tipo genérico y Vue la infiere en tiempo de compilación. En la Options API (la que usamos en este sandbox), se anota en tiempo de ejecución con PropType<T> dentro de la definición de cada prop.
// <script setup> - inferred from a generic type argument
defineProps<{ label: string; tone?: string }>()
// Options API - annotate at runtime with PropType<T>
export default {
props: {
label: { type: String as PropType<string>, required: true },
},
}
Babel borra los tipos, no los verifica
En este sandbox, el preset de TypeScript de Babel solo elimina las anotaciones de tipo, no las verifica. Un proyecto real también ejecutaría vue-tsc --noEmit (o el servidor de TypeScript de tu editor) para detectar errores de tipo antes de que lleguen a producción. Aquí, si escribes tipos inválidos, el código probablemente igual se ejecute, porque nada los valida en tiempo real.
Por qué molestarse
Autocompletado real en el editor, refactors más seguros, composables auto-documentados, y errores de mal uso de props detectados en CI antes de que un usuario los vea - ese es el retorno de escribir Vue con tipos.