[@vue/compiler-sfc] Unresolvable type: TSConditionalType

[Boke-Space]

Vue version

3.4.27

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-wennky?file=src%2FApp.vue,tsconfig.json,src%2Fmain.ts,src%2Fcomponents%2FHelloWorld.vue,src%2Fcomponents%2Ftype.ts,src%2Fcomponents%2FTable.vue&terminal=dev

Steps to reproduce

组件Helloworld引入类型TableEmits发生错误

组件Test引入类型TableEmits成功运行

What is expected?

组件HelloWorld传入ElTable得到事件的联合类型

What is actually happening?

[plugin:vite:vue] [@vue/compiler-sfc] Unresolvable type: TSConditionalType

/home/projects/vitejs-vite-wennky/node_modules/.pnpm/vue-component-type-helpers@2.0.26/node_modules/vue-component-type-helpers/index.d.ts
10 | emit: any;
11 | }, ...args: any) => any ? NonNullable : {};
12 | export type ComponentEmit = T extends new (...angs: any) => {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
13 | $emit: infer E;
| ^^^^^^^^^^^^^^^^^^^
14 | } ? NonNullable : {};
| ^^^^^^^^^^^^^^^^^^^^^^^

System Info

No response

Any additional comments?

No response

[edison1105]

This limitation has been resolved in 3.3. The latest version of Vue supports referencing imported and a limited set of complex types in the type parameter position. However, because the type to runtime conversion is still AST-based, some complex types that require actual type analysis, e.g. conditional types, are not supported. You can use conditional types for the type of a single prop, but not the entire props object.

https://vuejs.org/api/sfc-script-setup.html#type-only-props-emit-declarations

Try https://github.com/so1ve/vue.ts/tree/main/packages/complex-types

[kyselberg]

Hi!
I have similar issue with class-variance-authority library which is very painful((

[dsijakovski98]

Hi! I have similar issue with class-variance-authority library which is very painful((

Did you perhaps find a solution to this? 🥲

[felixdenoix]

Hi! I have similar issue with class-variance-authority library which is very painful((

Did you perhaps find a solution to this? 🥲

As sated in Edison's response:

You can use conditional types for the type of a single prop, but not the entire props object.

So, as long as the conditional type is not used on the root object everything is working fine. I'm doing the following:

<script setup lang="ts">
import { cva, type VariantProps } from "class-variance-authority"; 
const buttonVariants = cva("…", {
  variants: {
    display: { a: "…", b: "…" },
  },
});

type ButtonVariantProps = {
  variants: VariantProps<typeof buttonVariants>;
}

defineProps<ButtonVariantProps>()
</script>

<template>
  <section :class="buttonVariants(variants)">
    ...
  </section>
</template>