Optional type converts to "any" in Typescript, even with the attribute applied

[ragulka]

I have following Data object, where $description must either be a string, null (so that it's possible to unset it), or Optional (so that it's possible to PATCH update a product by not providing the description at all).

#[TypeScript]
class ProductData extends Data
{
    public function __construct(
        public string|Optional $name,    
        public string|null|Optional $description,
    }
}

When using typescript transformer, I get the following result. Note that the any type here is especially confusing.

export type ProductData = {
    name: any | string
    description: any | string | null
}

This is totally unexpected. I would have thought I get a result like this:

export type ProductData = {
    name?: string
    description?: string | null
}

I tried adding the Spatie\TypeScriptTransformer\Attributes\Optional attribute, like this:

use Spatie\TypeScriptTransformer\Attributes\Optional as OptionalInTypescript;

#[TypeScript]
class ProductData extends Data
{
    public function __construct(
        #[OptionalInTypeScript]    
        public string|Optional $name,    
        #[OptionalInTypeScript]        
        public string|null|Optional $description,
    }
}

And the result was following. Notice that the properties are now optional, but still have the any type.

export type ProductData = {
    name?: any | string
    description?: any | string | null
}

If I remove Spatie\LaravelData\Optional type:

use Spatie\TypeScriptTransformer\Attributes\Optional as OptionalInTypescript;

#[TypeScript]
class ProductData extends Data
{
    public function __construct(
        #[OptionalInTypeScript]    
        public string$name,    
        #[OptionalInTypeScript]        
        public string|null $description,
    }
}

I finally get the correct typescript version:

export type ProductData = {
    name?: string
    description?: string | null
}

However, now the properties are no longer truly optional when creating a new ProductData object:

ProducData::from(['name' => 'Foo'])->toArray();

// results in:

[
  "name" => "Foo",
  "description" => null, // <-- I can only make this disappear with `Spatie\LaravelData\Optional` type
]

I'm trying to understand if Spatie\LaravelData\Optional and Spatie\TypeScriptTransformer\Attributes\Optional are supposed to achieve the same effect, or not? How can I achieve a result where a property is truly optional in both PHP and TypeScript, without getting the any type?

[fredrikmikkelsen]

I'm experiencing this as well and I totally agree with @ragulka that Spatie\LaravelData\Optional should be transformed into ?property instead of any.

Is there another solution for this?

[rubenvanassche]

Are you using the correct transformer?

This test:

it('it can work with optional values', function () {
    $config = TypeScriptTransformerConfig::create();

    $data = new class () extends Data {
        public string|Optional $name;

        public string|null|Optional $description;
    };

    $transformer = new DataTypeScriptTransformer($config);
    $reflection = new ReflectionClass($data);

    dd($transformer->transform($reflection, 'DataObject')->transformed);
});

outputs:

{
name?: string;
description?: string | null;
}

[fredrikmikkelsen]

@rubenvanassche That works as well!

[ragulka]

@rubenvanassche I can confirm that both your and @fredrikmikkelsen 's solutions work. Is either of these documented anywhere? In any case, it would be really helpful to add a reference to this in https://spatie.be/docs/typescript-transformer/v2/laravel/installation-and-setup and/or https://spatie.be/docs/laravel-data/v2/advanced-usage/typescript

[rubenvanassche]

There's a section about it here: https://spatie.be/docs/typescript-transformer/v2/usage/using-transformers#content-default-transformers

[ragulka]

Hmm, I could not really figure this out from that page. It seems more like a reference than a guide. I noticed that https://spatie.be/docs/laravel-data/v2/advanced-usage/typescript#content-installation-of-extra-package does mention the following:

Finally, add the Spatie\LaravelData\Support\TypeScriptTransformer\DataTypeScriptTransformer transformer to the transformers in the typescript-transformer.php config file.

However, there is no mention that the order is significant. Ideally the guide would explain that this transformer needs to be included before the other, and why.

[rubenvanassche]

I've updated the docs on this