Configuración de TypeScript en proyectos Vue
vite.config.ts, tsconfig.json, vue-tsc, lang='ts' en SFC y compatibilidad de TypeScript en el IDE
Configuración de TypeScript en proyectos Vue es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 1 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.
TypeScript en Vue 3
Vue 3 se reescribió en TypeScript, por lo que ofrece una compatibilidad excelente con los tipos. Un proyecto bien configurado detecta errores durante la compilación y proporciona un excelente autocompletado del editor en los archivos .vue.
Configuración inicial con TS
La forma más sencilla de empezar es create-vue, que le pregunta si desea añadir TypeScript y configura tsconfig.json, vue-tsc y las herramientas adecuadas.
npm create vue@latest
# select "Add TypeScript? Yes"Aspectos básicos de tsconfig.json
tsconfig.json controla la compilación. La configuración más importante para detectar errores es el modo strict.
{
"compilerOptions": {
"strict": true,
"target": "ESNext",
"module": "ESNext"
}
}Por qué importa el modo strict
strict: true habilita strictNullChecks, noImplicitAny y mucho más. Le obliga a gestionar null/undefined y evita que se filtren valores sin tipo.
Alias de rutas
El alias @/ apunta a la carpeta src, de modo que las importaciones se mantienen limpias independientemente de la profundidad del archivo. Configúrelo tanto en tsconfig.json como en su bundler.
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}Uso del alias
Ahora las importaciones hacen referencia a los módulos desde la raíz del proyecto, en lugar de usar cadenas relativas como ../../.
import Button from '@/components/Button.vue'
import { useAuth } from '@/composables/useAuth'TypeScript en los SFC
Para usar TypeScript dentro de un Single File Component, añada lang="ts" a la etiqueta script. Con <script setup>, esto habilita los macros con tipos.
<script setup lang="ts">
const count: number = 0
</script>Comprobación de tipos en SFC
El compilador tsc normal no entiende los archivos .vue. Vue incluye vue-tsc, un wrapper que comprueba los tipos de las plantillas y los scripts conjuntamente.
vue-tsc --noEmitAñadir un script de comprobación
Añada un script a package.json para que CI y usted puedan verificar los tipos con un solo comando.
{
"scripts": {
"type-check": "vue-tsc --noEmit"
}
}Compatibilidad del editor con Volar
La extensión de VS Code Volar (Vue - Official) proporciona asistencia de TypeScript dentro de los archivos .vue: autocompletado, ir a la definición y errores de tipos en las plantillas. Desactive el antiguo Vetur para evitar conflictos.
Modo Takeover
Volar puede ejecutarse en Takeover Mode, reemplazando la extensión de TS integrada para gestionar tanto los archivos .ts como los archivos .vue. Esto mejora el rendimiento y la coherencia en proyectos grandes.
Comprobación rápida
Compruebe sus conocimientos sobre la configuración de TypeScript.
Resumen
Ha configurado TypeScript en Vue:
- Habilite el modo strict en tsconfig.json para obtener las comprobaciones más completas.
- Configure el alias de ruta @/* para que apunte a src.
- Añada lang="ts" a los scripts de los SFC.
- Compruebe los tipos con vue-tsc --noEmit y use la extensión Volar en VS Code.
Preguntas frecuentes
¿La lección «Configuración de TypeScript en proyectos Vue» es gratis?
Sí — el texto completo de «Configuración de TypeScript en proyectos Vue» 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 «Configuración de TypeScript en proyectos Vue»?
vite.config.ts, tsconfig.json, vue-tsc, lang='ts' en SFC y compatibilidad de TypeScript en el IDE 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 1 de 4.
¿Cuánto tiempo toma la lección «Configuración de TypeScript en proyectos Vue»?
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