Optional boolean prop gives type Ref<boolean | undefined> which should be Ref<boolean>

[jd-solanki]

Vue version

3.2.45

Link to minimal reproduction

https://sfc.vuejs.org/#eNp9kN1qwzAMhV9F+KYbNDa7DW7H2AvsAXyTpkqTEv8gOy0j+N0npz9sHfTO50j6ZJ1ZfIQgTxOKWujY0hASRExT2Bo32OApwQyEHWToyFtYcevqXvr0Nlx9qYooJC5rdUExhEVCG8YmISsAvcwofmt1L4i1uBAr2wR5jN7xd+bSbq6FaEQNi1M83lK0EX1KIdZKxa4tq49RejoofkmaXBosSoy22pE/RyQGG7H+xVBsnpAqQrdHQnrGfGj9xy3YbFzmU25BPEYKY+MOGyPKMXx/611MEMiHCBvYYzc4/CpKL3fG3p/fa9h5P2LDMebty+vzZPu37Twvc5AzVMAifQf03c3Tilv+Bp9/APuhswM=

Steps to reproduce

Here, we get show type as Ref<boolean> however in VS Code it is Ref<boolean | undefined> 🤔

1. check the type of the boolean in autosuggestion as shown in image

What is expected?

It should have property type as Ref according to this: https://vuejs.org/guide/components/props.html#prop-validation

The Boolean absent props will be cast to false. You can change this by setting a default for it — i.e.: default: undefined to behave as a non-Boolean prop.

What is actually happening?

It is getting type as Ref<boolean|undefined> where undefined is invalid.

System Info

System:
    OS: macOS 12.5.1
    CPU: (8) arm64 Apple M1
    Memory: 101.03 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.16.0/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Chrome: 105.0.5195.102
    Safari: 15.6.1
  npmPackages:
    vue: 3.2.45 => 3.2.45

Any additional comments?

Original Issue: vuejs/language-tools#2219

[jacekkarczmarczyk]

Duplicate of #7177? And/or maybe #5847

[LinusBorg]

@jacekkarczmarczyk Not really a duplicate of #7177. In fact, #7177 can be closed as it is expected behavior (#7177 (comment)).
#5847 seems to be related and likely solved when this issue here is solved, which seems to be the underlying issue for #5847.

Looking at the current docs about this, the provided example there suggests to simply declare boolean props as required, as they have an implicit default, but that seems like a typo. So docs need some cleaning up as well

[jacekkarczmarczyk]

suggests to simply declare boolean props as required

The problem with that is that my IDE (JetBrains) shows me the warning that component is missing required prop if I don't provide it. Not sure if this is a problem on IDE or Vue side

[LinusBorg]

As I said: that's a typo.

Ed it: not a typo. The example in the docs uses runtime props annotations:

const props = defineProps({
  disabled: Boolean
})

quivalent to a "normal" props definition:

defineComponent({
  props: {
    disabled: Boolean
  }
})

This works fine, the IDE will report it as optional in the parent, and it will be cast as boolean in the child:

But when using the generic argument instead, like in this issue, it breaks:

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

This is the bug we are discussing here.

[AlttiRi]

Is it a bug?

I think, it works as expected.

You use ? it's why you get | undefined.

---

Another example without any Vue.js code:

type TypeA = {
  prop1?: boolean
};
const b = {} as TypeA;
const prop1: boolean | undefined = b.prop1; // OK

Without ?:

type TypeB = {
  prop2: boolean
};
const a = {} as TypeB;
const prop2: boolean = a.prop2; // OK

---

UPD:

Ah, I see the quote:

The Boolean absent props will be cast to false.

[LinusBorg]

It is a bug because a boolean component prop cannot be undefined in Vue, it will always be cast to false at runtime. so the types should reflect that.

This is Vue-specific, so taking Vue out of the picture makes no sense.