Mapeo de rutas y resolución de módulos
Configure alias de rutas con baseUrl/paths, comprenda cómo TS resuelve los módulos y evite los errores habituales.
Mapeo de rutas y resolución de módulos es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 3 de 3. 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 TypeScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de TypeScript Academy incluye 3 lecciones en total.
Introducción
Objetivo: sustituir las importaciones relativas largas por alias de rutas y comprender las reglas de module resolution de TypeScript`s para mantener las importaciones limpias.
Rutas de tsconfig
Establezca baseUrl (la raíz del proyecto para las importaciones no relativas) y defina los alias en paths. Las claves pueden usar comodines *.
// file: tsconfig.json (excerpt)
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@utils/*": ["utils/*"],
"@components/*": ["components/*"]
}
}
}Uso de alias
Importe usando el alias exactamente como se declaró (por ejemplo, @utils/date). TypeScript resuelve la ruta asignada en src/.
// file: src/app.ts
import { formatDate } from "@utils/date";
import Button from "@components/Button";
console.log(formatDate(new Date()));
const btn = new Button();Estrategia de resolución
La resolución depende de module (Node, NodeNext, Bundler). TS comprueba las extensiones de archivo y las propiedades exports/types de package.json y, después, recurre a node_modules.
// Resolution order sketch (NodeNext/Node):
// 1) Exact file: .ts/.tsx/.d.ts/.js
// 2) Index files: index.ts / index.js
// 3) package.json exports / types
// 4) paths & baseUrl fallbacks
// 5) node_modules lookup (upwards)
export const note = "Resolution depends on module setting (Node, NodeNext, Bundler).";Alineación con el bundler
Importante: TS conoce los alias para la comprobación de tipos, pero su bundler/runtime también debe configurarlos (por ejemplo, Vite/Webpack/tsconfig-paths para ts-node).
// Example: vite.config.ts (alias for runtime)
import { defineConfig } from "vite";
import path from "path";
export default defineConfig({
resolve: {
alias: {
"@utils": path.resolve(__dirname, "src/utils"),
"@components": path.resolve(__dirname, "src/components")
}
}
});Consejos y errores comunes
Consejos:
- Mantenga estable baseUrl (por ejemplo, src/).
- Replique los alias en el bundler/runtime.
- Evite las cadenas profundas de ../..; prefiera alias concisos.
Comprobación de los alias de rutas
Comprobación rápida: ¿Qué opciones de tsconfig habilitan alias de rutas como @utils/*?
Resumen
Resumen: configure baseUrl y paths para los alias, aprenda el orden de resolución de TS y alinee el bundler/runtime para evitar importaciones rotas.
Preguntas frecuentes
¿La lección «Mapeo de rutas y resolución de módulos» es gratis?
Sí — el texto completo de «Mapeo de rutas y resolución de módulos» 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 TypeScript Academy, actualiza a CoddyKit PRO. El curso de TypeScript Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Mapeo de rutas y resolución de módulos»?
Configure alias de rutas con baseUrl/paths, comprenda cómo TS resuelve los módulos y evite los errores habituales. Practicas TypeScript 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 TypeScript Academy?
No se requiere experiencia previa. TypeScript 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 3.
¿Cuánto tiempo toma la lección «Mapeo de rutas y resolución de módulos»?
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 TypeScript Academy?
Sí. Cada lección de TypeScript 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
- Módulos ES (con nombre frente a predeterminados) y reexportaciones
- Declaraciones ambientales (.d.ts) y tipados de terceros
- Mapeo de rutas y resolución de módulos