TheForce00's avatar

Convert Inertia/React JS project to Typescript

I am helping a friend with a project with the tech stack of Laravel 10, Inertia, React and Javascript.

I am wanting to add typescript to the project before we create a ton of components.

I can use Typescript, but setting it up is out of my skill set and adding support for typescript appears to be complicated given all the moving parts in place.

Can someone please provide some guidance, resources or documentation that will help guide me through the process?

Thanks In Advance!

0 likes
4 replies
Tray2's avatar

My initial thought is that you need to ask yourself, is it really necessary?

There are blade component, livewire components, and filament components.

They all use php instead of JavaScript.

Sinnbeck's avatar

I'm pretty sure you can find several tutorials for setting up typescript with whatever compiler you guys are using (vite or webpack). Just Google "vite typescript setup" or similar

DreamHock-81807660's avatar

first thing you will need these JS packages: "dependencies": { "@types/react": "^19.0.2", "@types/react-dom": "^19.0.2", "typescript": "^5.7.2", }

change the app.jsx to app.tsx and add these changes so that you can use tsx and jsx if you want: resolvePageComponent( ./Pages/${name}.jsx, import.meta.glob("./Pages//*.jsx") ).catch(() => resolvePageComponent( ./Pages/${name}.tsx, import.meta.glob("./Pages//*.tsx") ) ),

in the root of app add this file: file: tsconfig.json contains: { "compileOnSave": true, "compilerOptions": { "allowJs": true, "sourceMap": true, "moduleResolution": "node", "lib": ["dom", "es2015", "es2016"], "jsx": "react-jsx", "target": "es5", "module": "esnext", "baseUrl": ".", "types": ["vite/client"] },

"include": [
    "resources/js/**/*.ts",
    "resources/js/**/*.tsx",
    "resources/js/**/*.d.ts",
    "resources/js/**/*.js",
    "resources/js/**/*.jsx",
    "resources/js/**/*.d.js"
],
"exclude": ["node_modules", "public"]

}

change vite.config.js to vite.config.ts and it should look like this now: export default defineConfig({ plugins: [ laravel({ input: ["resources/css/app.css", "resources/js/app.tsx"], refresh: true, }), react(), ], });

in app.blade.php add these scripts to the head: @routes @viteReactRefresh @vite(['resources/js/app.tsx', "resources/js/Pages/{$page['component']}.tsx"]) @inertiaHead

1 like

Please or to participate in this conversation.