Alias de rutas Typescript

 ¿Hay alguna herramienta de la build chain que permite en Typescript hacer imports a paths como @/components, y que los encuentre en un alias, digamos en /resources/js/components?

Sí, Gabriel 👌. Eso se logra configurando alias de paths en tu build chain. En proyectos Laravel + React + TypeScript, lo más común es que uses Vite (desde Laravel 9/10) o Webpack (si es más viejo). Ambos soportan alias, y TypeScript también necesita saberlos para resolver los imports.

🔹 En Vite (Laravel moderno)

1. Instalar el helper de paths:

   bash

   npm install -D vite-tsconfig-paths
   

   (este plugin hace que Vite respete los alias definidos en tsconfig.json).

2. Configurar vite.config.js:

   js

   import { defineConfig } from 'vite'
   import react from '@vitejs/plugin-react'
   import tsconfigPaths from 'vite-tsconfig-paths'
   
   export default defineConfig({
     plugins: [react(), tsconfigPaths()],
   })
   

3. Configurar tsconfig.json:

   json

   {
     "compilerOptions": {
       "baseUrl": "./resources/js",
       "paths": {
         "@/*": ["*"]
       }
     }
   }
   

👉 Ahora podés hacer:

ts

import Button from "@/components/Button"

y TypeScript + Vite lo van a resolver a resources/js/components/Button.

🔹 En Webpack (Laravel Mix)

Si tu proyecto usa Mix (Webpack), podés definir alias en webpack.mix.js:

js

const mix = require('laravel-mix');

mix.webpackConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'resources/js'),
    },
  },
});

Y en tsconfig.json igual que antes:

json

{
  "compilerOptions": {
    "baseUrl": "./resources/js",
    "paths": {
      "@/*": ["*"]
    }
  }
}

🔹 Ventajas de usar alias

• Evitás imports largos y frágiles como ../../../components/Button.

• Centralizás la ruta base (resources/js).

• Mejor autocompletado en editores.

• Escalable: podés definir varios alias (@hooks, @utils, etc.).

✨ En resumen: sí, podés usar alias como @/components. La herramienta depende de tu build chain:

• Vite → vite-tsconfig-paths + tsconfig.json.

• Webpack/Mix → resolve.alias + tsconfig.json.

¿Querés que te arme un ejemplo listo para copiar de configuración Laravel + Vite + React + TypeScript con alias @/components funcionando de punta a punta?