Alias de rutas en TypeScript: Mejora tus imports

Sun, 22 Dec 2024 00:00:00 +0900

Los alias de rutas reemplazan imports relativos profundos (../../components/Button) con alias limpios (@/components/Button). Mejoran la legibilidad y facilitan la reestructuración.

Configuración en tsconfig.json

{
 "compilerOptions": {
 "baseUrl": ".",
 "paths": {
 "@/*": ["src/*"],
 "@components/*": ["src/components/*"]
 }
 }
}

Integración con bundlers

Vite: resuelve alias de tsconfig automáticamente con vite-tsconfig-paths. Webpack: resolve.alias. Next.js: tsconfig.json paths soportado nativamente.

ESLint y editores

eslint-plugin-import necesita import/resolver configurado para seguir alias. VS Code usa tsconfig para autocompletado y navegación.

Project-Config on Commentary of Takao

Alias de rutas en TypeScript: Mejora tus imports

Configuración en tsconfig.json

Integración con bundlers

ESLint y editores