Laravel Data | typescript-transformer | Spatie SPATIE TypeScript Transformer ========================= spatie.be/open-source [Docs](https://spatie.be/docs) [Typescript-transformer](https://spatie.be/docs/typescript-transformer/v3) Laravel Laravel Data Version v3 v2 v1 Other versions for crawler [v3](https://spatie.be/docs/typescript-transformer/v3) [v2](https://spatie.be/docs/typescript-transformer/v2) [v1](https://spatie.be/docs/typescript-transformer/v1) Laravel Data - [ Introduction ](https://spatie.be/docs/typescript-transformer/v3/introduction) - [ Postcardware ](https://spatie.be/docs/typescript-transformer/v3/postcardware) - [ Installation ](https://spatie.be/docs/typescript-transformer/v3/installation) - [ Questions & issues ](https://spatie.be/docs/typescript-transformer/v3/questions-and-issues) - [ Changelog ](https://spatie.be/docs/typescript-transformer/v3/changelog) - [ About us ](https://spatie.be/docs/typescript-transformer/v3/about-us) Getting started --------------- - [ Setting up ](https://spatie.be/docs/typescript-transformer/v3/getting-started/setting-up) - [ Running TypeScript Transformer for the first time ](https://spatie.be/docs/typescript-transformer/v3/getting-started/first-run) - [ Special attributes ](https://spatie.be/docs/typescript-transformer/v3/getting-started/attributes) - [ Typing properties ](https://spatie.be/docs/typescript-transformer/v3/getting-started/typing-properties) - [ Replacing common types ](https://spatie.be/docs/typescript-transformer/v3/getting-started/replacing-types) - [ Formatters ](https://spatie.be/docs/typescript-transformer/v3/getting-started/formatters) Laravel ------- - [ Installation and setup ](https://spatie.be/docs/typescript-transformer/v3/laravel/installation-and-setup) - [ Laravel Data ](https://spatie.be/docs/typescript-transformer/v3/laravel/laravel-data) - [ Controllers ](https://spatie.be/docs/typescript-transformer/v3/laravel/controllers) - [ Routes ](https://spatie.be/docs/typescript-transformer/v3/laravel/routes) - [ Route filters ](https://spatie.be/docs/typescript-transformer/v3/laravel/route-filters) - [ Watch mode ](https://spatie.be/docs/typescript-transformer/v3/laravel/watch-mode) Custom transformers ------------------- - [ Getting started ](https://spatie.be/docs/typescript-transformer/v3/transformers/getting-started) - [ Class transformer ](https://spatie.be/docs/typescript-transformer/v3/transformers/class-transformer) - [ Enum transformer ](https://spatie.be/docs/typescript-transformer/v3/transformers/enum-transformer) Transformed providers --------------------- - [ Getting started ](https://spatie.be/docs/typescript-transformer/v3/providers/getting-started) - [ Using different writers in providers ](https://spatie.be/docs/typescript-transformer/v3/providers/writers-in-providers) - [ Logging in providers ](https://spatie.be/docs/typescript-transformer/v3/providers/logging) - [ Referencing types ](https://spatie.be/docs/typescript-transformer/v3/providers/references) - [ Helpers ](https://spatie.be/docs/typescript-transformer/v3/providers/helpers) TypeScript nodes ---------------- - [ Introduction ](https://spatie.be/docs/typescript-transformer/v3/typescript-nodes/introduction) - [ Building your own TypeScript node ](https://spatie.be/docs/typescript-transformer/v3/typescript-nodes/custom-nodes) - [ Visiting TypeScript nodes ](https://spatie.be/docs/typescript-transformer/v3/typescript-nodes/visitor) - [ Node reference ](https://spatie.be/docs/typescript-transformer/v3/typescript-nodes/reference) Watch mode ---------- - [ How does it work? ](https://spatie.be/docs/typescript-transformer/v3/watch-mode/how-it-works) - [ Setting up the runner ](https://spatie.be/docs/typescript-transformer/v3/watch-mode/setting-up-the-runner) - [ Watch events ](https://spatie.be/docs/typescript-transformer/v3/watch-mode/watch-events) - [ PHP Nodes ](https://spatie.be/docs/typescript-transformer/v3/watch-mode/php-nodes) Advanced -------- - [ Extensions ](https://spatie.be/docs/typescript-transformer/v3/advanced/extensions) - [ Managing transformers ](https://spatie.be/docs/typescript-transformer/v3/advanced/managing-transformers) - [ Loggers ](https://spatie.be/docs/typescript-transformer/v3/advanced/loggers) - [ Custom writers ](https://spatie.be/docs/typescript-transformer/v3/advanced/custom-writers) Laravel Data ============ ### On this page 1. [ Setup ](#content-setup) 2. [ How it works ](#content-how-it-works) 3. [ Lazy properties ](#content-lazy-properties) 4. [ Hidden properties ](#content-hidden-properties) 5. [ Property name mapping ](#content-property-name-mapping) 6. [ Custom data collections ](#content-custom-data-collections) If you're using [Laravel Data](https://spatie.be/docs/laravel-data), this package provides a dedicated extension that automatically transforms your Data classes to TypeScript types with full support for lazy properties, hidden fields and property name mapping. Setup ----------------------------------------------------------------------- Add the `LaravelDataTypeScriptTransformerExtension` to your `TypeScriptTransformerServiceProvider`: ``` use Spatie\LaravelTypeScriptTransformer\LaravelData\LaravelDataTypeScriptTransformerExtension; protected function configure(TypeScriptTransformerConfigFactory $config): void { $config->extension(new LaravelDataTypeScriptTransformerExtension()); } ``` That's it. Every Data class in your configured transform directories will now be picked up and converted to TypeScript. How it works -------------------------------------------------------------------------------------------- Given a Data class like this: ``` use Spatie\LaravelData\Data; class UserData extends Data { public function __construct( public string $name, public string $email, public int $age, public ?string $avatar, ) { } } ``` TypeScript Transformer will generate: ``` export type UserData = { name: string; email: string; age: number; avatar: string | null; }; ``` The transformer automatically picks up all public properties and resolves their types, including complex types defined via docblocks. Lazy properties ----------------------------------------------------------------------------------------------------- Laravel Data's lazy properties allow you to conditionally include data in responses. When TypeScript Transformer encounters a lazy type, it removes the lazy wrapper and makes the property optional instead: ``` use Spatie\LaravelData\Data; use Spatie\LaravelData\Lazy; class UserData extends Data { public function __construct( public string $name, public Lazy|string $email, public Lazy|int $age, ) { } } ``` Generates: ``` export type UserData = { name: string; email?: string; age?: number; }; ``` This works for all lazy types: `Lazy`, `ClosureLazy`, `ConditionalLazy`, `DefaultLazy`, `InertiaDeferred`, `InertiaLazy`, `LivewireLostLazy` and `RelationalLazy`. The `Optional` type is handled the same way, making the property optional in TypeScript. ### Custom lazy types If you have custom lazy types, you can register them: ``` $config->extension(new LaravelDataTypeScriptTransformerExtension( customLazyTypes: [ MyCustomLazy::class, ], )); ``` Hidden properties ----------------------------------------------------------------------------------------------------------- Properties marked with the `#[Hidden]` attribute (from either the TypeScript Transformer or Laravel Data package) will be excluded from the generated TypeScript type: ``` use Spatie\LaravelData\Data; use Spatie\LaravelData\Attributes\Hidden; class UserData extends Data { public function __construct( public string $name, #[Hidden] public string $password, ) { } } ``` Generates: ``` export type UserData = { name: string; }; ``` Property name mapping ----------------------------------------------------------------------------------------------------------------------- Laravel Data's `#[MapOutputName]` and `#[MapName]` attributes are respected. When a property has a mapped output name, the TypeScript property will use that name: ``` use Spatie\LaravelData\Data; use Spatie\LaravelData\Attributes\MapOutputName; class UserData extends Data { public function __construct( #[MapOutputName('full_name')] public string $name, public string $email, ) { } } ``` Generates: ``` export type UserData = { full_name: string; email: string; }; ``` Custom data collections ----------------------------------------------------------------------------------------------------------------------------- By default, the transformer knows how to handle `Collection`, `EloquentCollection` and `DataCollection` as array-like structures. If you have custom collection classes, you can register them: ``` $config->extension(new LaravelDataTypeScriptTransformerExtension( customDataCollections: [ MyCustomDataCollection::class, ], )); ``` A good match? ------------- ### What we do best - All things Laravel - Custom frontend components - Building APIs - AI-powered features - Simplifying things - Clean solutions - Integrating services ### Not our cup of tea - WordPress themes - Cutting corners - Free mockups to win a job - "Just execute the briefing" In short: we'd like to be a **substantial part** of your project. [ Get in touch via email ](mailto:info@spatie.be?subject=A%20good%20match%21&body=Tell%20us%20as%20much%20as%20you%20can%20about%0A-%20your%20online%20project%0A-%20your%20planning%0A-%20your%20budget%0A-%20%E2%80%A6%0A%0AAnything%20that%20helps%20us%20to%20start%20straightforward%21)