Convert PHP types to TypeScript with Typescript-transformer

Typescript-transformer is a useful package that has been introduced by Spatie. This package allows you to convert PHP classes to TypeScript. You can create new transformers and also transform and customize the PHP classes with this package.

Basic installation

You’ve to install this package via composer. Just run this command:

composer require spatie/laravel-typescript-transformer

The package will automatically register a service provider.

Now, You’ve to publish the config file with:

php artisan vendor:publish --provider="Spatie\LaravelTypeScriptTransformer\TypeScriptTransformerServiceProvider"

Executing the transform command

After configuring the package in the typescript-transformer config file, you can run this command to write the typescript output file:

php artisan typescript:transform

Command options

There are some extra commands you can use when running the command. It is also possible to transform classes in a specified path:

php artisan typescript:transform --path=app/Enums

Or you can define another output file than the default one:

php artisan typescript:transform --output=types.d.ts

This file will be stored in the resource’s path of your Laravel application.

It is also possible to automatically format the generated TypeScript with prettier:

php artisan typescript:transform --format

Typing properties

Let’s take a look at how we can type individual properties of a PHP class.

Using PHP’s built-in typed properties
It’s possible to use typed properties in a class. This package makes these types A-class citizens.

class Dto
{
    public string $string;

    public int $integer;

    public float $float;

    public bool $bool;

    public array $array;
    
    public mixed $mixed;
}

It is also possible to use nullable types:

class Dto
{
    public ?string $string;
}

You can even use these union types:

class Dto
{
    public float|int $float_or_int;
}

Or use other types that can be replaced:

class Dto
{
    public DateTime $datetime;
}

Describing types

PHP classes will only be converted to TypeScript when they are annotated, there are quite a few ways to do this, let’s take a look.

When using the @typescript annotation, the PHP class’s name will be used as name for the TypeScript type:

/** @typescript */
class Language extends Enum{
    const en = 'en';
    const nl = 'nl';
    const fr = 'fr';
}

The package will produce the following TypeScript:

export type Language = 'en' | 'nl' | 'fr';
It is also possible to use a PHP8 attribute like this:

#[TypeScript]
class Language extends Enum{
    const en = 'en';
    const nl = 'nl';
    const fr = 'fr';
}

You can also give the type another name:

/** @typescript Talen **/
class Language extends Enum{}
Which also can be done using attributes:

#[TypeScript('Talen')]
class Language extends Enum{}

Now the transformed TypeScript looks like this:

export type Talen = 'en' | 'nl' | 'fr';

There are many more options in this package you can view its complete detail on its Official website.