defineProps with a TS type and optional boolean has inconsistent behavior

[TheDutchCoder]

We use TS to define props this way:

const props = defineProps<{
  foo?: boolean
}>()

This all works, but Vue compiles optional booleans as false, not as undefined.
What's interesting is that in the template this works if you access props.foo, but not foo:

<template>
  <!-- Throws error as foo can be undefined -->
  <SomeComponent :is-visible="foo" />
</template>

<template>
  <!-- This works as expected -->
  <SomeComponent :is-visible="props.foo" />
</template>

Our question is: is this a Vue bug, or a language tools bug?

[KazariEX]

This is generally expected, as we should not make this prop required when using the component, in which case please use props.foo.

[TheDutchCoder]

But Vue defaults it to false, instead of undefined, which is the cause of the inconsistency.

As far as I can tell it compiles it to { foo: { type: Boolean, default: false } } and then the types don't match anymore.

There's also a lint rule to prevent setting default true explicitly, so that makes it even more inconvenient.

Using props. in templates is also not standard behavior.

[KazariEX]

Please track vuejs/core#12509.

[TheDutchCoder]

Awesome, thanks!

…

On Sun, Dec 8, 2024, 10:11 a.m. 山吹色御守 ***@***.***> wrote: Please track vuejs/core#12509 <vuejs/core#12509>. — Reply to this email directly, view it on GitHub <#5030 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAMXI3ZYGJRHAI4R7X6IIVL2ERORZAVCNFSM6AAAAABTE647JKVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCNBZHE4DSNY> . You are receiving this because you authored the thread.Message ID: ***@***.***>