Type of generic function as unknown when using tsx component

[s-montigny-desautels]

Vue version

3.3.4

Description

This issue appears when importing a .tsx component in a .vue component. If the props contain a function with a generic argument, the argument is of type unknown.

Link to minimal reproduction

https://github.com/s-montigny-desautels/vue3.3-issues

Steps to reproduce

$ pnpm install

Look for the error in file BugTSXFunctionUnknown.vue

What is expected?

The type of the function to respect the generic

What is actually happening?

The type of the function argument is of type unknown

Any additional comments?

This issue is only present in a .vue file. When using .tsx file, everything work as expected.

[rijenkii]

Smaller reproduction of the seemingly same problem:

<script setup lang="ts">
import { ref } from 'vue';

const val = ref(0);
const test = <K,>(_: { modelValue: K, "onUpdate:modelValue"?: (value: K) => any }) => "";
</script>

<template>
  <test :model-value="123" @update:model-value="val = $event" />
</template>

playground

Error in @update:model-value: Type 'unknown' is not assignable to type 'number'. ts(2322).
When hovering over :model-value and $event their types are shown as unknown.

So, it seems that the problem is not with JSX components, but with all generic functional components.

[rijenkii]

However, bizzarly, type checking in tsx files works without a hitch:

<script lang="tsx">
import { ref } from "vue";

const val = ref(0);
const Test = <K,>(_: { modelValue: K; "onUpdate:modelValue"?: (value: K) => any }) =>
  null;

export default () => (
  <Test modelValue={val.value} onUpdate:modelValue={(event) => (val.value = event)} />
);
</script>

[rijenkii]

Current workaround is using aliases:

<script setup lang="ts">
import { ref } from 'vue';

const val = ref(0);
const test = <K,>(_: { modelValue: K, "onUpdate:modelValue"?: (value: K) => any }) => "";

const testNumber = test<number>;
</script>

<template>
  <testNumber :model-value="123" @update:model-value="val = $event" />
</template>

playground

[s-montigny-desautels]

Fixed with Vue 3.4.20