Skip to content

Type-only props are unable to infer primitive runtime prop types from generic types, which breaks boolean casting #12872

Open
@JoCa96

Description

@JoCa96

Vue version

3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNqNVE1vEzEQ/SuWhRBIVVYCTmG7CFBBcIAKInHxZbOZpC5e2/JHmird/96x197dtGnTk8cz742fZ8be089az7Ye6JyWtjFcO2LBeV0xyVutjCNfVavJ2qiWMDorwi7gGWWSybLoOYjGjYNWi9oB7ggpr95VC+OhLNCIjphIG95yx7dAbkytNazy+h0kGN4QL7mS6PYyA4oh37da2IcJQ7QsJkfTM+pso+Sab2bXVkm82T7AGW0QzwWY39rhGZbROYmREKuFUDc/o8+h6rPsb66g+X/Ef213wcfopQELZosFGWKuNhtwffji7y/YoT0EW7XyAtHPBP+AVcIHjT3si5crlD3BRbU/Yn+43Czsxc6BtPlSQWhAdhHPKLYrlOqpq49y388+RB6THVYxt3oyGqKWm3NkYIJhTNytBvLvoInloiLnZEHuiL1tl0qgIX27xCscoBGzVEpALY8hmcQmWocTo7RF6ArWXMJl2JVR+zBKn+Y5z8fgT3OD3nTO1JsUjsEsOWWoIngYPsQ9EIbGeFhHXvd1TFN7cGZXvXmLy3NvxIu4oiV4sib3wh7t++vPxmfTYXcioxgoU3LSPaHmZ/QyYirHY35+nyfSpEJM+PlBnyQ+lj7+ASfIyHjVz8kx4NKkP+QpuyxiIw6/ke4elrixhQ==

Steps to reproduce

Our specific issue is that when the runtime prop type missing, the Boolean Casting doesn't work as expected.

  1. Define a generic type like:
type Wrapped<T> = T | number | string:
  1. Create a component with type-only props, that uses the type:
<script lang="ts" setup>
const props = defineProps<{
  wrapped?: Wrapped<boolean>;
}>();
</script>
  1. Try to use the boolean prop:
<template>
  <Comp wrapped /> <!-- component acts like `wrapped` is undefined -->
</template>
  1. => The component acts like wrapped is undefined`
  2. => See output, runtime-prop is missing:

const sfc = /@PURE/_defineComponent({
__name: 'Comp',
props: {
wrapped: {},
},
setup(__props) {

const props = __props;

return (_ctx,_cache) => {
return (_openBlock(), _createElementBlock("div"))
}
}

})

What is expected?

  • primitive runtime prop should be inferred correctly from static, generic types
  • boolean casting should work for these

What is actually happening?

The runtime prop is undefined, and the prop is not treated as a boolean

System Info

System:
    OS: macOS 14.7.3
    CPU: (10) arm64 Apple M1 Max
    Memory: 1.05 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.13.1 - ~/.local/state/fnm_multishells/71295_1739433231412/bin/node
    npm: 10.9.2 - ~/.local/state/fnm_multishells/71295_1739433231412/bin/npm
    pnpm: 10.2.0 - ~/.local/state/fnm_multishells/71295_1739433231412/bin/pnpm
  Browsers:
    Edge: 132.0.2957.140
    Safari: 18.3

Any additional comments?

We noticed that our boolean prop types were not recognized:

<template>
  <Comp wrapped /><!-- wrapped should be `true` for the `Comp` instance, but is nullish -->
</template>

Metadata

Metadata

Assignees

No one assigned

    Labels

    🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.scope: compilerscope: sfc

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions