Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Browse all series

Practical TypeScript for the Laravel Developer

In this series, we are going to learn about the typical situations you will encounter when building a Laravel app with a TypeScript frontend. We'll talk about TypeScript primitives, how to organize your types, when to type, and, ultimately, how to generate types from your PHP code. All signal, no noise!

Series trailer thumbnail

Progress

Series Info

Episodes
15
Run Time
1h 22m
Difficulty
Intermediate
Last Updated
Dec 16, 2025
Version
Latest
Play Series

Series Episodes

  1. Getting Started (2)

    1. Intro + Setup

      Let's get started! We'll talk about why we may want to use TypeScript in the first place and how it benefits you during development. Then we'll dive into configuring TypeScript for your application and converting the app entry point.

    2. TypeScript Basics

      Before converting our components to TypeScript, let's take a moment to talk about the basic primitives we'll be using to add type safety to our client side code.
  2. Typing Your Components (4)

    1. Inertia Props

      The first step in converting our Edit component is to add types to our component props, in this case, the props being passed to the component via Inertia. We'll learn how to take our PHP data and convert it to the equivalent types in TypeScript.

    2. Form Requests

      We'll look at the Inertia useForm hook and use the provided generic to ensure that the outgoing form request matches the validation expected by the server.

    3. Side Quest: Form Handlers

      We've added a lot of type safety to our Edit component, but we still have some stragglers that have red squiggles: form and input handlers. Let's tackle them.

    4. Adding Types to Laravel Echo and Stream Hooks

      It's very possible that you'll use Laravel's first party Echo and Stream hooks in your application. Let's learn how to increase our type safety and IDE intelligence when using these hooks.
  3. Organization and Utilities (2)

    1. Where Should Everything Go?

      Our component is looking a bit verbose. Let's clean it up! We'll introduce a couple of strategies regarding how to organize your types to maximize usability and readability.

    2. TypeScript Utilities

      We're going a bit deeper on this one. We'll use TypeScript utilities such as Pick, Required, Omit, and Partial to re-use our existing types in creative ways.
  4. TypeScript Patterns (4)

    1. Vanilla TS

      Sometimes you're not working in the context of a component! We explore how to add type safety around two common HTTP concepts: axios and fetch.

    2. Vue Example

      React shouldn't have all the fun. Let's convert our Edit.vue component to TypeScript so you can see how Vue handles type safety.

    3. Typing Common React Hooks

      Let's explore common React hooks such as useRef, useState, and useMemo and figure out how to enhance them with TypeScript where it makes sense.

    4. Typing Common Vue Functions

      You're likely to use Vue functions such as ref and computed, let's learn how to add some type safety where it makes sense.
  5. Automatic Type Generation (2)

    1. Generating Types with Laravel Data and TypeScript Transformer

      Up until this point we've been manually writing our types. Let's generate them automatically using two packages from Spatie by specifying which PHP classes we'd like converted to TypeScript.

    2. Generating Types with Laravel Wayfinder

      Now let's generate every type you can think of in your Laravel app, automatically, with Laravel Wayfinder. We'll explore the benefits of automatic type generation and how to incorporate Wayfinder into your local dev process.
  6. Wrap Up (1)

    1. Outro

      This is goodbye for now. I hope you move forward feeling more confident about using TypeScript in your frontend code and understand the importance of end-to-end type safety and the added IDE intelligence.

Continue Learning

Blaze Deep-Dive thumbnail

Blaze Deep-Dive

With Caleb Porzio

Blade components are slow. Really slow. At scale, they quietly become the biggest bottleneck in your Laravel application. We discovered this while trying to make Flux as fast as possible, and the result is Blaze: a package that fundamentally rethinks how Blade components are compiled and rendered. With multiple levels of optimization, Blaze can shave hundreds of milliseconds off a page load, making Blade rendering up to 25x faster in some cases.In this series, we'll install it, benchmark it, build a toy version from scratch so you truly understand how it works, and then master every directive and edge case so you can squeeze maximum performance out of your own apps.

  • 20 Episodes
Customizing Filament For User-Facing Apps thumbnail

Customizing Filament For User-Facing Apps

With Shruti Balasa

In this series, we'll build a real, user-facing app called Booknest using Laravel and Filament. We'll begin with a fresh install and begin pushing Filament beyond the usual "internal admin only" setup that you typically see. It's capable of so much more.

  • 14 Episodes
Filament 5 in Depth thumbnail

Filament 5 in Depth

With Kevin McKee

Filament's powers have increased exponentially. Now at version 5, it's more powerful and capable than ever. In this series, we'll build a practical Roadmap app from scratch, using Filament for the admin panel and Livewire for the public-facing side.Along the way, we'll cover panel configuration, enum-driven UI, strict authorization with policies, and newer form inputs like ToggleButtons, Sliders, and the TipTap-powered RichEditor. By the end, you'll have a full-featured app and a solid handle on everything new in Filament.

  • 16 Episodes
Build Native Apps With PHP thumbnail

Build Native Apps With PHP

With Simon Hamp

Welcome to my CreatorSeries! I’m Simon, and in this series we’re going to learn about NativePHP and use it to build true native applications for desktop and mobile. We're not talking about web apps accessed through the browser. Your users will be able to install directly on their devices. This is a big leap forward for the PHP ecosystem, and while it’s a real paradigm shift from the way we normally build with PHP and Laravel, we’ve worked hard to keep it familiar and approachable. So grab a warm drink, get comfortable, and let's start building!

  • 17 Episodes
Laravel From Scratch (2026 Edition) thumbnail

Laravel From Scratch (2026 Edition)

With Jeffrey Way

Welcome to the latest iteration of the longest running Laravel introductory video series in the world. Like clockwork, we refresh this series every two years. This latest 2026 iteration covers Laravel 12 and beyond. You'll learn not only the basic fundamentals of Laravel, but also how to leverage more advanced features like authentication, authorization, queues, testing, and more. We'll even review the full deployment process from scratch.

  • 43 Episodes