TypeError when using ternary operator in <component>

[ymy0622]

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

const flag = ref(true);
</script>

<template>
  <div>
    <Component :is="flag ? 'ComA' : 'ComB'" />
    <Component :is="!flag ? 'ComA' : 'ComB'" style="background: pink" />
  </div>
</template>

ComA & ComB are global registration

Repro repo: https://stackblitz.com/edit/vitejs-vite-uonfzg?file=package.json

[jiikoosol]

I have the same problem.

[lihanspace]

[jiikoosol]

In my case this was the solution. So basically I had to define the returning type of the computed property which is used to define the dynamic component type. It also works with as any or just as Component.

<template>
  <component :is="myComponent"></component>
</template>

<script setup lang="ts">
import { computed, ref, type Component } from "vue";
import type MyComponent from "@/components/MyComponent.vue";

const someCondition = ref(true);

const myComponent = computed(() =>
  someCondition.value ? "my-component-name" : undefined
) as Component<typeof MyComponent>;
</script>

[lihanspace]

I have rolled back the version of vue-tsc to v1.5.2