TypeScript in Laravel 12 Starter Kits: Main Things To Know

In the new Laravel 12 starter kits, React.js and Vue.js versions come with TypeScript. If you haven't used TypeScript before, this tutorial will explain what you need to know.

Simple Example

First, I want to emphasize that using TypeScript is optional. Even if starter kits use types initially, you may continue writing JavaScript without types.

Now, let's take a look at the example in the React starter kit:

resources/js/pages/dashboard.tsx:

import { PlaceholderPattern } from '@/components/ui/placeholder-pattern';
import AppLayout from '@/layouts/app-layout';
import { type BreadcrumbItem } from '@/types'; 
import { Head } from '@inertiajs/react';
 
const breadcrumbs: BreadcrumbItem[] = [ 
    {
        title: 'Dashboard',
        href: '/dashboard',
    },
]; 
 
export default function Dashboard() {
// ...
}

Do you see that .tsx file extension? And those types?

Compare how that JavaScript code would look without TypeScript:

import { PlaceholderPattern } from '@/components/ui/placeholder-pattern';
import AppLayout from '@/layouts/app-layout';
import { Head } from '@inertiajs/react';
 
const breadcrumbs [
    {
        title: 'Dashboard',
        href: '/dashboard',
    },
];
 
export default function Dashboard() {
// ...
}

Let's see another example of type-hinting props:

import type {PaginatedData, Task} from '@/types';
 
export default function Index({ tasks }: { tasks: PaginatedData<Task> }) {
    return (
        // ...
    );
}

Compare code without TypeScript:

export default function Index({ tasks }) {
    return (
        // ...
    );
}

It's simpler, right? So why TypeScript?

Benefits of TypeScript

Now, what advantages do we get by defining those types?

1. Type hinting and autocomplete
2. Preventing errors
3. Improved code maintainability and easier refactoring
4. Better collaboration with team
5. Improves tooling support (IntelliSense, linting, debugging)

For Laravel users, it's similar to PHP becoming a more strict type, with Laravel 10 adopting it throughout the framework skeleton, see my video.

use Inertia\Response;
use Illuminate\Http\RedirectResponse;
 
class RegisteredUserController extends Controller
{
    public function create(): Response 
    {
        //
    }
 
    public function store(Request $request): RedirectResponse 
    {
        // ...
    }
}

The same logic applies to JS: you may optionally use types to make your project more strict.

TypeScript is backward compatible with JavaScript, so types can be added to an existing project slowly.

How to Start Using TypeScript

Typescript is a package that should be installed separately, in addition to your JS framework like React/Vue. When creating a new project, you should choose to install TypeScript. Let's see how to add TypeScript to an existing project.

First, you must install the TypeScript itself.

npm install typescript --save-dev

Next, you must install different packages depending on whether you use React.js or Vue.js.

React.js

First, you need to install type definitions for React.

npm install @types/react @types/react-dom

Next, a tsconfig.json file should be generated.

npx tsc --init

This will generate a TypeScript configuration file with default settings. I recommend checking the tsconfig.json file in the React starter kit to see what changes to make.

Then, rename all .jsx files to .tsx. The vite.config.js can be renamed to vite.config.ts.

Vue.js

First, install TypeScript support for .vue files with type definitions.

npm install typescript vue-tsc @vue/tsconfig @types/node --save-dev

Next, a tsconfig.json file should be generated.

npx tsc --init

This will generate a TypeScript configuration file with default settings. I recommend checking the tsconfig.json file in the Vue starter kit to see what changes to make.

In every .vue file, the <script setup> should have a lang="ts" added.

<script setup lang="ts">
// ...
</script>

Creating Custom Types

The starter kit defines types in the resources/js/types folder. It's in the index.d.ts file. The way you define types is mainly identical, as this is a TypeScript feature.

resources/js/types/index.d.ts:

import { LucideIcon } from 'lucide-react';
import type { Config } from 'ziggy-js';
 
export interface Auth {
    user: User;
}
 
export interface BreadcrumbItem { 
    title: string;
    href: string;
}
 
// ...

resources/js/pages/dashboard.tsx:

import { PlaceholderPattern } from '@/components/ui/placeholder-pattern';
import AppLayout from '@/layouts/app-layout';
import { type BreadcrumbItem } from '@/types'; 
import { Head } from '@inertiajs/react';
 
const breadcrumbs: BreadcrumbItem[] = [ 
    {
        title: 'Dashboard',
        href: '/dashboard',
    },
];
 
export default function Dashboard() {
// ...
}

Is TypeScript Popular?

In other words, is it worth using if we look at the adoption in the JS audience? The short answer would be Yes. It gives more strictness and fewer places for errors.

Looking at this Reddit post on JavaScript vs TypeScript, TypeScript is the clear winner of the poll. Here are some comments from the same post:

I used to find writing things in TS to be somewhat tedious. Now I’ve been writing TS exclusively for one year and writing plain JS feels weird to me.

I switched to typescript and never looked back.

Strong typing is easier to maintain and force good coding practices

Of course, there are many more similar threads in Reddit. Also, many packages, like popular shadcn, use TypeScript.

But again, TypeScript is still optional, so if you write custom code on top of Laravel starter kits, you may use general JavaScript, without defining the types.