Usa imports limpios con path mapping en tsconfig

En aplicaciones de TypeScript o Angular, muchas veces terminamos con rutas relativas largas y difíciles de leer como en este ejemplo:

import { BookMark } from 'src/app/models/bookmark';
import { BookmarksState } from './../../../state/bookmarks.state';
import { GetBookMark } from './../../../state/bookmarks.actions';

Podemos transformar esas rutas en imports mucho más limpios y organizados como estos:

import { BookMark } from '@app/models/bookmark';
import { BookmarksState } from '@state/bookmarks.state';
import { GetBookMark } from '@state/bookmarks.actions';

¿Cómo funciona?

Toda esta magia viene directamente del compilador de TypeScript. El compilador permite mapear rutas mediante la propiedad "paths" en el archivo tsconfig.json.

Primero, define tu ruta base. Si estás en una aplicación de Angular, entra en compilerOptions y cambia el baseUrl de "./" a "src":

"compilerOptions": {
    "baseUrl": "src",
....

Luego, define atajos para cada área de tu proyecto, por ejemplo componentes, estado, páginas o modelos:

 "paths": {
      "@app/*": ["app/*"],
      "@pages/*": ["app/pages/*"],
      "@components/*": ["app/components/*"],
      "@state/*": ["state/*"]
 },

Listo. Ahora cambia el código en tus componentes o archivos, y VS Code detectará las nuevas rutas configuradas en tu tsconfig.

A veces es necesario reiniciar o reabrir el editor para que detecte las nuevas rutas automáticamente.

Antes y después

Aquí puedes ver la diferencia en el código:

Conclusión

Espero que esto te sirva de ayuda para escribir rutas más limpias en tus aplicaciones de TypeScript o Angular. Si te gustó este artículo, ¡compártelo!