Como agregar y usar alias en typescript sin morir en el intento

Usualmente cuando trabajamos en proyectos importaciones que resultan tediosas 😬

import { x } from '../../../../path/to/x';

// code ...

Para reducir ésto, typescript nos provee paths en el archivo de configuración tsconfig.json, con el fin de agregar alias que nos ayuden a tener un código más limpio 😎

{
  "compilerOptions": {
    // skip
    "paths": {
      "@src/*": ["./src/*"]
    }
  }
}

En ésta parte podemos añadir los diferentes directorios con sus respectivos alias, quedando nuestro primer bloque de código mucho más limpio 🙌

import { x } from '@src/path/to/x';

// code ...

Este es el primer paso para que nuestros alias nos funcione; typescript compilará con éxito debido a que el compilador inteligentemente resuelve las importaciones. Pero al momento de ejecutar nuestro proyecto con node, ts-node, ts-node-dev, etc, el proyecto no se ejecutará y arrojará un error donde indicará que "no encuentra x importación", y ésto ocurre por el método de resolución de módulos de nodejs que solo busca en la carpeta de node_modules, por supuesto no encontrará las importaciones propias que hemos especificado en el archivo de configuración tsconfig.

Pero ¡no te preocupes! Hay una solución 😎 tsconfig-paths, arreglará este problema por nosotros, resolviendo las importaciones que hemos definido en paths.

Primero necesitamos instalar el paquete:

yarn add -D tsconfig-paths

Luego, actualizamos el script package.json:

{
  "scripts": {
    "dev": "ts-node-dev --respawn --transpile-only -r tsconfig-paths/register index.ts"
  }
}

¡Genial! ¡Ya funciona! ✨. Puedes añadir la cantidad de alias que quieras, y todo funcionará debidamente 💪.

Espero que este post haya sido de ayuda.

Puedes ver y seguirme en mi perfil de github 😃

Gracias por leer éste articulo, Happy coding! 💻