Cómo configurar el mapping de rutas en el fichero tsconfig.json
Configurar el mapping de rutas en tsconfig.json permite definir alias para las rutas de importación en un proyecto TypeScript, facilitando la gestión y lectura del código. Esto ayuda a evitar rutas de importación largas y complejas.
Configuración en tsconfig.json
Para configurar el mapping de rutas, necesitas modificar las propiedades baseUrl y paths en el archivo tsconfig.json.
-
baseUrl: Define la ruta base desde la cual se resolverán las rutas relativas especificadas enpaths. -
paths: Es un objeto donde cada clave es un alias y su valor es un array con las rutas relativas correspondientes.
Ejemplo de configuración
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@components/*": ["components/*"],
"@utils/*": ["utils/*"],
"@services/*": ["services/*"]
}
}
}En este ejemplo:
-
baseUrlestá configurado a"./src", lo que significa que las rutas serán resueltas a partir del directoriosrc. -
pathstiene tres alias: -
@components/*que mapea a todos los archivos dentro desrc/components/. -
@utils/*que mapea asrc/utils/. -
@services/*que mapea asrc/services/.
Algunos ejemplos
Con la configuración anterior, puedes importar módulos usando los alias definidos:
import { Button } from '@components/Button';
import { calculateSum } from '@utils/math';
import { UserService } from '@services/user';
Esto es mucho más limpio y fácil de mantener que usar rutas relativas largas como ../../components/Button.
Referencia oficial
Para más detalles sobre la configuración de tsconfig.json, puedes consultar la documentación oficial de TypeScript.
Jorge García
Fullstack developer