Generic vue types break depending how props are accessed in template.

[minht11]

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.

[so1ve]

Related https://github.com/vuejs/language-tools/issues/3651 https://github.com/vuejs/core/pull/9418

[KazariEX]

It works well with the latest version. If it still happens, feel free to open a new issue.