Boolean casting is confusing when using generic type for prop

[J-Michalek]

When using a generic type that extends boolean I find the interaction confusing. I am not 100% sure that this is a language-tools issues or rather Vue issue, but I will try to give some reasoning to why I think that there should be some kind of a check in the language-tools for this.

Component that uses a generic type which extends boolean:

<template>
  <div>isPrimary: {{ isPrimary }}</div>
</template>

<script setup lang="ts" generic="IsPrimary extends boolean">
defineOptions({
  name: "ComponentWithGenericType"
})

defineProps<{
  isPrimary: IsPrimary;
}>();
</script>

If a parent component provides the prop with boolean casting in mind

<template>
  <ComponentWithGenericType is-primary />
</template>

the prop won't actually be made into a boolean but rather an empty string, which seems fine to me, because it will be either true or false and the Vue compiler probably doesn't know that it should treat it as a boolean.

This can lead to easily overlooked bugs, because if the boolean casting doesn't work the empty string is a falsy value essentially doing the opposite of what the developer intended.

My suggestion: The language tools should let the developer know, that boolean casting doesn't work with generic types.

[so1ve]

Thanks for the report! However I think adding an extra warning is unnecessary since we can handle this issue in vue's compiler. Here's an upstream issue: https://github.com/vuejs/core/issues/9877

[zhiyuanzmj]

https://vue-macros.dev/features/boolean-prop.html