Subscribe on changes!

Generic props extending boolean should apply Boolean casting

avatar
Jan 31st 2024

Vue version

3.4.15

Link to minimal reproduction

sfc playground

Steps to reproduce

Say I have this component Comp.vue, which accepts foo prop, a generic type extending boolean:

<script setup lang="ts" generic="T extends boolean">
const props = defineProps<{
  foo?: T
}>()
</script>

<template></template>

Then I want to use it with foo being true, and since type of foo is T, which extends boolean, it should be reasonable to use like this:

<script setup lang="ts">
import Comp from './Comp.vue'
</script>

<template>
 <Comp foo></Comp>
</template>

What is expected?

foo should be parsed to true

What is actually happening?

foo is parsed to empty string ''

System Info

System:
    OS: macOS 14.2.1
    CPU: (8) arm64 Apple M1
    Memory: 60.52 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
    pnpm: 6.35.1 - ~/javascript-projects/work/SanOmics/molprophet-main/node_modules/.bin/pnpm
    bun: 1.0.22 - ~/.bun/bin/bun
  Browsers:
    Chrome: 121.0.6167.85
    Edge: 121.0.2277.83
    Safari: 17.2.1
    Safari Technology Preview: 17.4
  npmPackages:
    vue: 3.4.3 => 3.4.3

Any additional comments?

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

avatar
Feb 1st 2024

duplicate of #9877