Aprender Vuejs TypeScript con Vue

TypeScript se ha convertido en el estándar para desarrollar aplicaciones Vue robustas y mantenibles. Vue ofrece soporte de primera clase para TypeScript, con tipos integrados en toda su API pública y herramientas como vue-tsc para verificación de tipos en archivos .vue.

Integración de TypeScript en Vue

Vue está escrito en TypeScript y proporciona definiciones de tipos completas. Esto permite una experiencia de desarrollo superior con autocompletado, detección de errores en tiempo de desarrollo y refactorización segura.

Configuración del proyecto

Un proyecto Vue con TypeScript utiliza múltiples archivos de configuración:

• tsconfig.json: Configuración raíz que referencia las configuraciones específicas
• tsconfig.app.json: Configuración para el código de la aplicación
• tsconfig.node.json: Configuración para herramientas de build (Vite)

Componentes tipados con <script setup lang="ts">

La forma recomendada de escribir componentes Vue con TypeScript es mediante <script setup lang="ts">:

<script setup lang="ts">
import { ref, computed } from 'vue'

interface Product {
  id: number
  name: string
  price: number
}

const products = ref<Product[]>([])

const total = computed<number>(() =>
  products.value.reduce((sum, p) => sum + p.price, 0)
)
</script>

Props y Emits tipados

Vue permite definir props y emits con genéricos de TypeScript directamente:

<script setup lang="ts">
const props = defineProps<{
  title: string
  count?: number
}>()

const emit = defineEmits<{
  (e: 'update', value: string): void
  (e: 'delete', id: number): void
}>()
</script>

Composables tipados

Los composables pueden aprovechar genéricos y tipos avanzados como MaybeRefOrGetter<T> para crear APIs flexibles:

import { ref, toValue, type MaybeRefOrGetter } from 'vue'

function useLocalStorage<T>(key: string, defaultValue: T): Ref<T> {
  const stored = localStorage.getItem(key)
  const data = ref<T>(stored ? JSON.parse(stored) : defaultValue) as Ref<T>

  watch(data, (val) => {
    localStorage.setItem(key, JSON.stringify(val))
  }, { deep: true })

  return data
}

Herramienta vue-tsc

vue-tsc es el compilador de TypeScript adaptado para archivos .vue. Se ejecuta con vue-tsc --noEmit para verificar tipos en todo el proyecto, incluyendo templates y archivos SFC.

Este módulo cubre desde la configuración inicial del proyecto hasta patrones avanzados como componentes genéricos, composables tipados y el uso de InjectionKey<T> para provide/inject con seguridad de tipos.