> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/spatie/laravel-data/llms.txt
> Use this file to discover all available pages before exploring further.

# TypeScript Transformation

> Automatically generate TypeScript definitions from your Laravel Data objects

Thanks to the [typescript-transformer](https://spatie.be/docs/typescript-transformer) package, you can automatically transform data objects into TypeScript definitions.

## Example Transformation

This PHP data object:

```php theme={null}
class DataObject extends Data
{
    public function __construct(
        public null|int $nullable,
        public int $int,
        public bool $bool,
        public string $string,
        public float $float,
        /** @var string[] */
        public array $array,
        public Lazy|string $lazy,
        public Optional|string $optional,
        public SimpleData $simpleData,
        /** @var \Spatie\LaravelData\Tests\Fakes\SimpleData[] */
        public DataCollection $dataCollection,
    )
    {
    }
}
```

Transforms to this TypeScript type:

```tsx theme={null}
{
    nullable: number | null;
    int: number;
    bool: boolean;
    string: string;
    float: number;
    array: Array<string>;
    lazy? : string;
    optional? : string;
    simpleData: SimpleData;
    dataCollection: Array<SimpleData>;
}
```

## Installation

Install the TypeScript transformer package:

```bash theme={null}
composer require spatie/laravel-typescript-transformer
```

Publish the config file:

```bash theme={null}
php artisan vendor:publish --tag=typescript-transformer-config
```

Add the transformer to `typescript-transformer.php`:

```php theme={null}
'transformers' => [
    Spatie\LaravelData\Support\TypeScriptTransformer\DataTypeScriptTransformer::class,
    // Other transformers...
],
```

<Note>
  If you're using the `DtoTransformer` provided by the package, put the `DataTypeScriptTransformer` before it.
</Note>

## Usage

Annotate data objects you want to transform:

```php theme={null}
/** @typescript */
class SongData extends Data
{
    // ...
}
```

Or use the attribute:

```php theme={null}
use Spatie\TypeScriptTransformer\Attributes\TypeScript;

#[TypeScript]
class SongData extends Data
{
    // ...
}
```

Generate TypeScript definitions:

```bash theme={null}
php artisan typescript:transform
```

## Transform All Data Objects

Use the `DataTypeScriptCollector` to automatically transform all data objects:

In `typescript-transformer.php`:

```php theme={null}
'collectors' => [
    Spatie\LaravelData\Support\TypeScriptTransformer\DataTypeScriptCollector::class,
    // Other collectors...
],
```

<Note>
  If you're using the `DefaultCollector`, put the `DataTypeScriptCollector` before it.
</Note>

## Optional Types

Lazy and optional properties become optional in TypeScript:

```php theme={null}
class DataObject extends Data
{
    public function __construct(
        public Lazy|string $lazy,
        public Optional|string $optional,
    )
    {
    }
}
```

Transforms to:

```tsx theme={null}
{
    lazy? : string;
    optional? : string;
}
```

### Optional Without Lazy/Optional Types

Use the `Optional` attribute from typescript-transformer:

```php theme={null}
use Spatie\TypeScriptTransformer\Attributes\Optional as TypeScriptOptional;

class DataObject extends Data
{
    public function __construct(
        #[TypeScriptOptional]
        public int $id,
        public string $someString,
        public Optional|string $optional,
    )
    {
    }
}
```

<Note>
  Alias the TypeScript `Optional` attribute to avoid conflicts with Laravel Data's `Optional` type.
</Note>