Instalar dependencias de ts.
Crear archivo tsconfig.json y su configuración.
Crear el archivo de definición para vite/client.
Importante!
Lo primero
Doy por sentado que ya tenés configurado inertia con react para un proyecto laravel.
Instalar dependencias de ts
npm install -D typescript @types/react @types/react-dom
Si estas usando docker, recordá anteponer el “sail”
Crear tsconfig.json
touch tsconfig.json
En esta parte la configuración es más a gusto, peor te paso la mía
“compilerOptions”: {
“target”: “es5”,
“lib”: [“dom”, “dom.iterable”, “esnext”],
“allowJs”: true,
“skipLibCheck”: true,
“strict”: true,
“noEmit”: true,
“esModuleInterop”: true,
“module”: “esnext”,
“moduleResolution”: “bundler”,
“resolveJsonModule”: true,
“isolatedModules”: true,
“jsx”: “preserve”,
“allowImportingTsExtensions”: true,
“paths”: {
“@/*”: [“./resources/js/*”]
}
},
“include”: [“resources/js/**/*.ts”, “resources/js/**/*.tsx”, “resources/js/**/*.d.ts”, “vite.config.ts”],
“exclude”: [“node_modules”]
}
Crear el archivo de definición
echo “/// <reference types=”vite/client” />” > vite-env.d.ts
Al momento de crearlo también hay que agregarle el comentario especial
Importante
Al hacer un npm run build, tenés que importar el build con un type=module, ejemplo:
<script type=”module” src=”{{ asset(“build/assets/app-tX21Cx8Q.js”) }}”></script>
