Typescript: Path mapping
Introducción
Esto será una breve introducción sobre qué es path mapping y como nos puede ayudar en las importaciones en nuestro código, evitando romper las importaciones si la estructura de nuestro proyecto cambia, escribir importaciones más limpias y evitar escribir largas rutas de importación que pueden ser confusas en ocasiones, por ejemplo:
import { miClase } from ‘../../../dir1/dir2/miClase’;
¿Qué es path mapping?
Es una manera que nos provée Typescript de mapear las direcciones (paths) donde se encuentran nuestros archivos TS, creando así shortcuts (atajos) para nuestros archivos (clases, funciones, etc…) que podemos importar en otros módulos, creando importaciones mucho más limpias y entendibles. Veremos unos ejemplos de cómo nos puede ayudar esto en nuestros proyectos.
Para este ejemplo usaremos un proyecto muy sencillo con el propósito de entender el uso del path mapping, y la estructura es la siguiente:
Nota: En este contenido se da por hecho que el lector ya tiene conocimientos básicos de Typescript.
En el ejemplo tenemos dos archivos, file1.ts y file3.ts (clases). vamos a importar file3.ts en file1.ts de la manera convencional y vamos a crear una instancia de dicha clase:
como podemos observar en la imagen de arriba, se realizó la importación de la clase File3 que se encuentra en ‘../dir2/dir3/file3’. Esto es una importación normal, y la ruta puede ser un poco larga en algún momento. Para evitar eso vamos a crear un path mapping.
Creando un path mapping
Para eso vamos a nuestro archivo tsconfig.json y agregamos la propiedad “paths”: {} al json de configuración, y dentro de la propiedad “path” agregamos una propiedad con el nombre como se va a identificar el contenido y como valor el path donde se encuentra almacenado el archivo o archivos.
Podemos observar que dentro de la propiedad “paths” creamos una propiedad llamada “myImport/*”, el nombre de la propiedad es cómo se va a identificar el path mapping. El valor que recibe es un array con las rutas de los directorios que serán identificados con ese path mapping. El /* al final de la ruta “src/dir2/dir3/*” indica que tome en cuenta todos los archivos de dicho directorio.
Usando un path mapping
Para usar el path mapping podemos importarlo de la siguiente manera:
ahora el editor detecta el path mapping como un folder, y podemos importar lo que se encuentra en myImport.
Este import queda más corto que el anterior y por lo tanto más legible.
Cambiando la estructura del proyecto
Ahora imaginémos que decidimos mover el archivo file3.ts al directorio dir2. Esto causaría que en todos los archivos donde se importa la clase File3 empiecen a marcar error de importación, ya que nuestro archivo no se encuentra en la ruta que se había definido antes (“src/dir2/dir3/*”). Ya que ahora se encuentra en “src/dir2/*”
si no se hubiera usado path mapping, tendríamos que cambiar la importación en cada uno de los archivos donde se usa la clase File3, pero con path mapping lo único que tenemos que hacer es cambiar la ruta en la configuración del archivo tsconfig.json y los errores de importación desaparecerán.
Conclusión
Usar path mapping nos puede facilitar a la hora de tener nuestro código modulado y evitar escribir rutas demasiada largas y confusas, además de un mejor control a la hora de mover la estructura de nuestro proyecto y evitar que nuestro código se rompa.
Más detalles sobre path mapping en el sitio official de typescript.
