Forem: Davejs136

Amazing post!

Davejs136 — Mon, 18 Aug 2025 16:46:55 +0000

Alex Bespoyasov

Sep 1 '21

Clean Architecture on Frontend

#typescript #react #architecture

2509

Comments 137

35 min read

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

Davejs136 — Fri, 18 Nov 2022 17:09:32 +0000

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! 💻

How to add alias in typescript

Davejs136 — Mon, 31 Oct 2022 12:42:35 +0000

When we are working on development projects sometimes we have a long path of imports 😬

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

// code ...

To reduce these long paths, TypeScript provides us with paths in tsconfig.json to add path aliases 😎

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

By setting the paths configuration to the different paths we need, the code above looks cleaner 🙌

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

// code ...

This is the main configuration for paths works, typescript will compile this with successful because the compiler can resolve those paths. But when we run the project with node, ts-node, ts-node-dev, etc, it will fail, and that's due to the nodejs module resolution, it just looks in the node_modules folder and doesn't find the modules which we already specified by paths in tsconfig.

But no worries! There is a solution 😎, tsconfig-paths fixes that for us, solving the specified paths.

First we need to install the package.

yarn add -D tsconfig-paths

After this just update the package.json script

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

And that's it! Works ✨! You can add more paths as much as you want! 💪

I hope this post has been helpful!

You can follow me in my github profile 😃

Thank you for reading this post! Happy coding! 💻