Subscribe on changes!

inconsisten behaviour of missing required boolean prop

avatar
Nov 19th 2022

Vue version

3.2.45

Link to minimal reproduction

https://sfc.vuejs.org/#__DEV__eNqFUstOwzAQ/JWVL6FSY6vhgkLSFnHjAEhcfUkbtzXUD9lOEYry76yTgtJW0IvjmZ3ZcdZuyYO19NAIkpPCr520AbwIjYV9pbclJ8FzMudaKmtcgEejLGycUZBQFkG0JvdcF2wwoxRBEMruqyAQARS9ieG+YKMCmZKhaaoqS9+90XiENhr4sYDJOfRM5DAoYk52IVifM9Zo+7Gla6PYEmvMNTpIJdLaqOUtzejsjtXShzFPhVfpyplPLxwmcjIdNWdIHoRLndC1cML9G3amPQk8q12ExsyO6w4H8DPBK8OvxUZq8eqM9UUL0b8yZp/3q6g0jn9gssUp54PL4yL1FnE3v5lcuandbD50blt4ent5poNZbr5uIj+BrisYisbi7C91diHvz4Ni/EJZltAc/6yGBSS/IIH8vB3uRs1On1H3DVFf8Xc=

Steps to reproduce

Create component with required boolean and string prop, use this component without passing any prop

What is expected?

Either boolean prop should be passed as undefined or it shouldn't be throwing missing prop warning Additionally foo?: boolean prop type is boolean | undefined, while with the object declaration (foo: Boolean, no required: true) it's just boolean as expected

What is actually happening?

boolean prop is passed as false string prop is passed as undefined

System Info

No response

Any additional comments?

If it's not a bug then at least it's confusing and bad DX in my opinion

avatar
Nov 20th 2022

It's similar to #5847.

avatar
Jan 9th 2023

Expected and documented behavior. Missing Boolean props are cast to false every since Vue 2 at least. I get the confusion this may cause, but that API is set like this until we talk about breaking changes for Vue 4 some time in the future.

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

I get though, that we could improve this docs section as it can be misunderstood (and has a few typos in the types in the composition API example).

avatar
Jan 9th 2023

Expected and documented behavior

Could you please point me to the docs section saying that the type of ?: boolean prop (which as I understand would be equivalent of { type: Boolean } in object syntax) is boolean | undefined although the value is never undefined (even when we pass undefined explicitely) and that the TS behaviour is different for options API and composition API?

avatar
Jan 9th 2023
  • The fact that the TS behavior is different when using defineProps() is the bug discussed in #7487. The inferred type should just be boolean, because missing boolean props are always cast to false, so they can't be undefined.
  • The behavior for { type: Boolean } is explained in the section I linked to (switch docs to options API).
  • The composition API version of that same section seems to have a typo in that the ?: operator is missing in the example. I'm on the process of opening an issue about that and also suggest some re-wording.

Edit: I closed this issues here as the "expected behavior" was worded as "should pass undefined" which it should not, so there's nothing to fix regarding that.

I kinda missed that you also described the types problem reported in #7487. Can we continue discussion about that bug in that new issue, as it doesn't have two topics intertwined?

avatar
Jan 9th 2023

Can we continue discussion about that bug in that new issue, as it doesn't have two topics intertwined?

I was just about to write that my issue is also about the type, that's fine, let's keep the discussion in the other issue