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 episodes
Getting Started (2)
Intro + Setup
5m 24sStart with TypeScript: learn why it helps, set up your app, and convert the entry point to boost development speed and type safety.
TypeScript Basics
7m 23sLearn TypeScript basics and core primitives to add type safety to your frontend, and get confident before converting components.
Typing Your Components (4)
Inertia Props
3m 22sEasily convert Inertia props from PHP to TypeScript - learn practical steps to type your Edit component props and avoid runtime bugs.
Form Requests
5m 7sUse Inertia's useForm with generics to type form requests, ensuring outgoing submissions match server validation and avoid runtime errors.
Side Quest: Form Handlers
2m 43sQuickly fix TypeScript errors in form and input handlers: learn practical techniques to type them in your Edit component and remove red squiggles.
Adding Types to Laravel Echo and Stream Hooks
4m 38sAdd TypeScript types to Laravel Echo and Stream hooks to boost type safety and IDE autocompletion for real-time app development.
Organization and Utilities (2)
Where Should Everything Go?
6m 18sTidy verbose components: learn practical ways to organize TypeScript types for clearer, reusable code and faster development.
TypeScript Utilities
9m 10sMaster TypeScript utilities like Pick, Required, Omit, and Partial to reuse types more effectively - practical examples and clear explanations.
TypeScript Patterns (4)
Vanilla TS
4m 26sAdd TypeScript type safety to axios and fetch outside components—practical patterns and examples to build safer, clearer HTTP code.
Vue Example
2m 42sConvert an Edit.vue component to TypeScript — see how Vue enforces type safety with clear, practical examples for real apps.
Typing Common React Hooks
5m 46sLearn to type useRef, useState, and useMemo in React with TypeScript—practical tips to make hooks safer and clearer in real apps.
Typing Common Vue Functions
4m 52sAdd TypeScript safety to Vue's ref and computed—learn practical typings and patterns to make reactive code safer and more predictable.
Automatic Type Generation (2)
Generating Types with Laravel Data and TypeScript Transformer
9m 7sEasily generate TypeScript types from Laravel Data PHP classes using Spatie packages to save time and keep types in sync.
Generating Types with Laravel Wayfinder
10m 5sAuto-generate TypeScript types for your Laravel app with Wayfinder—speed up development, keep types synced, and integrate into your workflow.
