DEV Community

Cover image for Como agregar y usar alias en typescript sin morir en el intento
Davejs136
Davejs136

Posted on

 

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 ...
Enter fullscreen mode Exit fullscreen mode

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/*"]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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 ...
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Luego, actualizamos el script package.json:

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

隆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! 馃捇

Top comments (0)

Visualizing Promises and Async/Await 馃く

async await

鈽濓笍 Check out this all-time classic DEV post