Vue version

3.3.4

Link to minimal reproduction

https://github.com/arthaali/vue-boolean-string

Steps to reproduce

Having props of type boolean will cast an empty string as true. This is already resolved here as expected behavior based on this issue https://github.com/vuejs/vue/issues/4710

but I have props of type boolean | string and here I expect empty strings to not be converted to any other value as we have a special handling for it inside our component

type FieldProps = {
    value: boolean | string;
};

if I only switched the type orders it would result in the expected behavior and we would receive an empty string

type FieldProps = {
    value: string | boolean;
};

This behavior can lead to issues in applications where empty strings need to be distinguished from true or other values. It can result in unexpected behavior and complicate the development process, particularly when working with forms, validation, or conditional rendering.

The order in which the prop types are defined (boolean before string or vice versa) affects the return type, further exacerbating the problem. This inconsistency in return types based on type order adds unnecessary complexity to Vue.js component development and can lead to hard-to-debug issues.

What is expected?

expected to have an empty string and not true for both cases value: boolean | string; and value: string | boolean;

What is actually happening?

I get different results based on the order in which I define the types when passing empty string.

value: boolean | string; => true value: boolean | string; => ""

System Info

No response

Any additional comments?

No response

https://vuejs.org/guide/components/props.html#boolean-casting

@so1ve OMG, thank you I still think it is confusing though :(