Script Setup nullable prop type causes compile error

[RorzGonzalez]

Version

3.2.20

Reproduction link

sfc.vuejs.org/

Steps to reproduce

Run the SFC Playground code with npm run dev and the Errors.vue file will throw a build error.

The NoErrors.vue file will not throw an error.

The only difference is the way nullable props are defined in script setup

What is expected?

Should compile without errors.

What is actually happening?

withDefaults(defineProps<Props>(), { in script setup throws an error when <Props> interface declaration includes the null type.

[ygj6]

The problem does not reproduce. After replacing App.vue with Errors.vue, everything is fine. Or maybe I missed something?:joy:

[posva]

I think he's referring to the generated JS as one is type: [null, Boolean] while the other is type: Boolean

[RorzGonzalez]

I have create a repo of the setup and description of the errors.

Specifically the Login1 and Login2 pages provide default null prop values using the two different styles.

The readme explains

https://github.com/CamdenGonzalez/vue-inertia-typescript-laravel

[LinusBorg]

I think he's referring to the generated JS as one is type: [null, Boolean] while the other is type: Boolean

@posva OP is saying there are compile errors. I also can't reproduce any compile errors.

I have create a repo of the setup and description of the errors.

@CamdenGonzalez can you give the actual error messages? I still don't know what kind of error we are talking about. I can't run your repo right now (and it's a laravel mix project,hardly a small repro).

[RorzGonzalez]

Apologies, I don't honestly know how to quantify repo sizes. I infer from your comment that a laravel project would be considered a large repo.

Prop with default null value - no errors

<script setup lang="ts">
// No errors from this file - props are nullable as expected
import { PropType } from 'vue'

interface Item {
    [key: string]: unknown
}

const props = defineProps({
    status: {
        type: String as PropType<string | Item | null>,
        required: false,
        default: null
    }
})
</script>

Prop with default null value - throws errors during watch

<script setup lang="ts">

interface Item {
    [key: string]: unknown
}
interface Props {
    status?: string | Item | null
}
const props = withDefaults(defineProps<Props>(), {
    status: null
})
</script>

The error for the nullable prop in script setup

TS2769: No overload matches this call.
  The last overload gave the following error.
    Type '{ type: (StringConstructor | ObjectConstructor | null)[]; required: false; default: null; }' is not assignable to type 'Prop<unknown, unknown> | null'.
      Types of property 'type' are incompatible.
        Type '(StringConstructor | ObjectConstructor | null)[]' is not assignable to type 'true | PropType<unknown> | null | undefined'.
          Type '(StringConstructor | ObjectConstructor | null)[]' is not assignable to type 'PropConstructor<unknown>[]'.
            Type 'StringConstructor | ObjectConstructor | null' is not assignable to type 'PropConstructor<unknown>'.
              Type 'null' is not assignable to type 'PropConstructor<unknown>'.
              ```