Closed
Description
Generic vue types break depending how props are accessed in template.
Lets take component like this, it all works fine:
<script lang="ts">
export const customFormatter = (num: number) => `${num * 3}!!!`
export type FormatNumber<T> = (num: T) => string;
</script>
<script lang="ts" setup generic="T extends number, Formatter extends FormatNumber<T>">
const props = defineProps<{
value: T,
formatter: Formatter
}>()
</script>
<template>
{{ value }} {{ props.formatter(props.value) }}
</template>Now take the same component and instead use prop directy inside template without props. like this:
<script lang="ts">
export const customFormatter = (num: number) => `${num * 3}!!!`
export type FormatNumber<T> = (num: T) => string;
</script>
<script lang="ts" setup generic="T extends number, Formatter extends FormatNumber<T>">
defineProps<{
value: T,
formatter: Formatter
}>()
</script>
<template>
{{ value }} {{ formatter(value) }}
</template>And you will get This expression is not callable. Type 'unknown' has no call signatures.
