TypeScript has become the professional baseline for JavaScript development in 2026. If your Laravel project has a React or Vue frontend, running plain JavaScript is leaving a significant safety net on the table.<\/p>\n
This guide covers a complete TypeScript setup for Laravel \u2014 from Vite configuration to shared types between your PHP backend and React frontend.<\/p>\n
The specific benefits for Laravel + React projects:<\/p>\n
npm install --save-dev typescript @types\/node @types\/react @types\/react-dom<\/code><\/pre>\n\/\/ tsconfig.json\r\n{\r\n \"compilerOptions\": {\r\n \"target\": \"ESNext\",\r\n \"lib\": [\"ESNext\", \"DOM\"],\r\n \"module\": \"ESNext\",\r\n \"moduleResolution\": \"bundler\",\r\n \"jsx\": \"react-jsx\",\r\n \"strict\": true,\r\n \"noUncheckedIndexedAccess\": true,\r\n \"exactOptionalPropertyTypes\": true,\r\n \"noImplicitReturns\": true,\r\n \"noFallthroughCasesInSwitch\": true,\r\n \"baseUrl\": \".\",\r\n \"paths\": {\r\n \"@\/*\": [\"resources\/js\/*\"]\r\n },\r\n \"skipLibCheck\": true\r\n },\r\n \"include\": [\r\n \"resources\/js\/**\/*.ts\",\r\n \"resources\/js\/**\/*.tsx\",\r\n \"resources\/js\/**\/*.d.ts\"\r\n ],\r\n \"exclude\": [\"node_modules\", \"public\"]\r\n}<\/code><\/pre>\nStep 2 \u2014 Update Vite Config<\/h2>\n\/\/ vite.config.ts\r\nimport { defineConfig } from 'vite';\r\nimport laravel from 'laravel-vite-plugin';\r\nimport react from '@vitejs\/plugin-react';\r\nimport path from 'path';\r\n\r\nexport default defineConfig({\r\n plugins: [\r\n laravel({\r\n input: ['resources\/js\/app.tsx'], \/\/ .tsx extension\r\n refresh: true,\r\n }),\r\n react(),\r\n ],\r\n resolve: {\r\n alias: {\r\n '@': path.resolve(__dirname, '.\/resources\/js'),\r\n },\r\n },\r\n});<\/code><\/pre>\nStep 3 \u2014 Type Your Laravel API Responses<\/h2>\n
Create a resources\/js\/types<\/code> directory for all shared types:<\/p>\n\/\/ resources\/js\/types\/models.ts\r\n\r\nexport interface User {\r\n id: number;\r\n name: string;\r\n email: string;\r\n created_at: string;\r\n updated_at: string;\r\n}\r\n\r\nexport interface Project {\r\n id: number;\r\n name: string;\r\n description: string | null;\r\n status: 'active' | 'paused' | 'completed' | 'cancelled';\r\n user_id: number;\r\n created_at: string;\r\n updated_at: string;\r\n\r\n \/\/ Relationships (optional \u2014 only present when eager loaded)\r\n tasks?: Task[];\r\n owner?: User;\r\n}\r\n\r\nexport interface Task {\r\n id: number;\r\n project_id: number;\r\n title: string;\r\n description: string | null;\r\n status: 'pending' | 'in_progress' | 'completed';\r\n priority: 'low' | 'medium' | 'high' | 'urgent';\r\n due_date: string | null;\r\n completed_at: string | null;\r\n created_at: string;\r\n updated_at: string;\r\n}\r\n\r\n\/\/ Pagination wrapper\r\nexport interface Paginated<T> {\r\n data: T[];\r\n current_page: number;\r\n last_page: number;\r\n per_page: number;\r\n total: number;\r\n from: number | null;\r\n to: number | null;\r\n links: Array<{\r\n url: string | null;\r\n label: string;\r\n active: boolean;\r\n }>;\r\n}<\/code><\/pre>\n\/\/ resources\/js\/types\/inertia.d.ts\r\n\/\/ Type Inertia page props globally\r\nimport { User } from '.\/models';\r\n\r\ndeclare module '@inertiajs\/react' {\r\n interface PageProps {\r\n auth: {\r\n user: User;\r\n };\r\n flash: {\r\n success?: string;\r\n error?: string;\r\n };\r\n }\r\n}<\/code><\/pre>\nStep 4 \u2014 Type Inertia Page Components<\/h2>\n\/\/ resources\/js\/Pages\/Projects\/Index.tsx\r\nimport { Head, Link } from '@inertiajs\/react';\r\nimport type { PageProps } from '@inertiajs\/react';\r\nimport type { Project, Paginated } from '@\/types\/models';\r\nimport AppLayout from '@\/Layouts\/AppLayout';\r\n\r\n\/\/ Typed page props\r\ninterface Props extends PageProps {\r\n projects: Paginated<Project>;\r\n filters: {\r\n search?: string;\r\n status?: string;\r\n };\r\n}\r\n\r\nexport default function ProjectsIndex({ projects, filters }: Props) {\r\n return (\r\n <AppLayout>\r\n <Head title=\"Projects\" \/>\r\n\r\n <div>\r\n {projects.data.map((project) => (\r\n <Link key={project.id} href={`\/projects\/${project.id}`}>\r\n <div>\r\n <h3>{project.name}<\/h3>\r\n <span>{project.status}<\/span>\r\n {\/* TypeScript knows project.tasks is Task[] | undefined *\/}\r\n {project.tasks && (\r\n <span>{project.tasks.length} tasks<\/span>\r\n )}\r\n <\/div>\r\n <\/Link>\r\n ))}\r\n <\/div>\r\n\r\n <div>\r\n Page {projects.current_page} of {projects.last_page}\r\n <\/div>\r\n <\/AppLayout>\r\n );\r\n}<\/code><\/pre>\nStep 5 \u2014 Typed Forms with Inertia<\/h2>\n\/\/ resources\/js\/Pages\/Projects\/Create.tsx\r\nimport { useForm } from '@inertiajs\/react';\r\n\r\ninterface CreateProjectForm {\r\n name: string;\r\n description: string;\r\n status: 'active' | 'paused';\r\n}\r\n\r\nexport default function CreateProject() {\r\n const { data, setData, post, processing, errors } = useForm<CreateProjectForm>({\r\n name: '',\r\n description: '',\r\n status: 'active',\r\n });\r\n\r\n \/\/ TypeScript knows data.name is string\r\n \/\/ TypeScript knows data.status is 'active' | 'paused' \u2014 not any string\r\n \/\/ TypeScript errors if you try to set data.unknown_field\r\n\r\n return (\r\n <form onSubmit={(e) => { e.preventDefault(); post('\/projects'); }}>\r\n <input\r\n value={data.name}\r\n onChange={(e) => setData('name', e.target.value)}\r\n \/>\r\n {errors.name && <p>{errors.name}<\/p>}\r\n\r\n <select\r\n value={data.status}\r\n onChange={(e) => setData('status', e.target.value as CreateProjectForm['status'])}\r\n >\r\n <option value=\"active\">Active<\/option>\r\n <option value=\"paused\">Paused<\/option>\r\n <\/select>\r\n\r\n <button type=\"submit\" disabled={processing}>Create<\/button>\r\n <\/form>\r\n );\r\n}<\/code><\/pre>\nStep 6 \u2014 Typed Routes with Ziggy<\/h2>\n
Ziggy generates JavaScript route helpers from your Laravel routes \u2014 and with TypeScript, you get full type safety on route parameters:<\/p>\n
composer require tightenco\/ziggy<\/code><\/pre>\nnpm install --save-dev ziggy-js<\/code><\/pre>\n\/\/ routes\/web.php \u2014 add names to all routes\r\nRoute::get('\/projects', [ProjectController::class, 'index'])->name('projects.index');\r\nRoute::get('\/projects\/{project}', [ProjectController::class, 'show'])->name('projects.show');\r\nRoute::post('\/projects', [ProjectController::class, 'store'])->name('projects.store');<\/code><\/pre>\n\/\/ Generate TypeScript types from your routes\r\nphp artisan ziggy:generate --types<\/code><\/pre>\n\/\/ resources\/js\/Pages\/ProjectShow.tsx\r\nimport { Link } from '@inertiajs\/react';\r\nimport { route } from 'ziggy-js';\r\n\r\nexport default function ProjectShow({ project }) {\r\n return (\r\n <div>\r\n {\/* TypeScript knows projects.show requires {project: number} *\/}\r\n <Link href={route('projects.show', { project: project.id })}>\r\n View Project\r\n <\/Link>\r\n\r\n {\/* TypeScript ERROR: missing required parameter *\/}\r\n {\/* <Link href={route('projects.show')}> *\/}\r\n <\/div>\r\n );\r\n}<\/code><\/pre>\nStep 7 \u2014 Laravel Data for Shared Types (Advanced)<\/h2>\n
The spatie\/laravel-data<\/code> package can automatically generate TypeScript types from your PHP Data classes \u2014 eliminating manual type duplication:<\/p>\ncomposer require spatie\/laravel-data\r\nnpm install --save-dev @spatie\/laravel-typescript-transformer<\/code><\/pre>\n<?php\r\n\r\n\/\/ app\/Data\/ProjectData.php\r\nuse Spatie\\LaravelData\\Data;\r\nuse Spatie\\TypeScriptTransformer\\Attributes\\TypeScript;\r\n\r\n#[TypeScript]\r\nclass ProjectData extends Data\r\n{\r\n public function __construct(\r\n public readonly int $id,\r\n public readonly string $name,\r\n public readonly ?string $description,\r\n public readonly ProjectStatus $status, \/\/ enum\r\n public readonly Carbon $created_at,\r\n ) {}\r\n\r\n public static function fromModel(Project $project): self\r\n {\r\n return new self(\r\n id: $project->id,\r\n name: $project->name,\r\n description: $project->description,\r\n status: $project->status,\r\n created_at: $project->created_at,\r\n );\r\n }\r\n}<\/code><\/pre>\n# Generate TypeScript types from PHP Data classes\r\nphp artisan typescript:transform<\/code><\/pre>\nThis generates:<\/p>\n
\/\/ auto-generated \u2014 do not edit\r\nexport type ProjectData = {\r\n id: number;\r\n name: string;\r\n description: string | null;\r\n status: 'active' | 'paused' | 'completed' | 'cancelled';\r\n created_at: string;\r\n}<\/code><\/pre>\nYour PHP and TypeScript types stay in sync automatically \u2014 change the PHP class and regenerate.<\/p>\n
TypeScript Strict Mode \u2014 Common Errors and Fixes<\/h2>\n\/\/ Error: Object is possibly null\r\nconst name = user?.name; \/\/ \u2705 optional chaining\r\nif (user) { const name = user.name; } \/\/ \u2705 null check\r\n\r\n\/\/ Error: Element implicitly has 'any' type\r\nconst value = data['key']; \/\/ \u274c\r\nconst value = (data as Record<string, unknown>)['key']; \/\/ \u2705\r\n\r\n\/\/ Error: Type 'string' is not assignable to status enum\r\nsetData('status', 'unknown'); \/\/ \u274c TypeScript catches this\r\nsetData('status', 'active'); \/\/ \u2705\r\n\r\n\/\/ Error: Property does not exist on type\r\nproject.unknown_field; \/\/ \u274c TypeScript catches this\r\nproject.name; \/\/ \u2705<\/code><\/pre>\n