Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
jd-solanki opened this issue Jan 9, 2023 · 6 comments · Fixed by #7619
Closed

Comments

@jd-solanki
Copy link

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> 🤔

image

  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

@LinusBorg LinusBorg added scope: compiler scope: script-setup 🐞 bug Something isn't working and removed 🐞 bug Something isn't working labels Jan 9, 2023
@jacekkarczmarczyk
Copy link
Contributor

Duplicate of #7177? And/or maybe #5847

@LinusBorg
Copy link
Member

LinusBorg commented Jan 9, 2023

@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
Copy link
Contributor

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
Copy link
Member

LinusBorg commented Jan 9, 2023

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:

Bildschirm­foto 2023-01-09 um 11 46 32

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

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

Bildschirm­foto 2023-01-09 um 11 48 48

This is the bug we are discussing here.

@AlttiRi

This comment was marked as resolved.

@LinusBorg

This comment was marked as resolved.

zhangzhonghe pushed a commit to zhangzhonghe/core that referenced this issue Apr 12, 2023
IAmSSH pushed a commit to IAmSSH/core that referenced this issue May 14, 2023
@github-actions github-actions bot locked and limited conversation to collaborators Sep 15, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
5 participants