After upgrading to 0.36 x version can't get to use the < script setup > syntactic sugar component types

[rennzhang]

I used defineExpose in the child component:

But you can't use typeof to obtain the corresponding types in the parent component, and error message will appear:

[johnsoncodehk]

Hi @RennCheung, maybe you want to use ref<InstanceType<typeof operateCatalog>> instead of.

[rennzhang]

Thanks Reply.

emm...Do I need to write this in the future? The need for an additional nested layer of InstanceTypecan sometimes be annoying.

And I found another problem. When I hovered over value, the ts type prompt mainly showed the property methods of the component instance object, while the property methods I exported myself were hidden because of too much content, which was very unfriendly, as follows:

---

The reminder here in the 0.35.x version will be more friendly. I can see the method type I exported very intuitively, and I don't care about the attributes of the component instance itself, as follows:

Is this an expected behavior? Maybe you can do this function better

[exherb]

when use unplugin-vue-components with dts: true, some lint issue happens.

import '@vue/runtime-core'

declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    AfCard: typeof import('./src/anyforce/components/card.vue')['default']
  }
}

error TS2604: JSX element type 'AfCard' does not have any construct or call signatures.

[johnsoncodehk]

@exherb See #1405 (comment).

[exherb]

@exherb See #1405 (comment).

Thanks, is this a temporary solution?

[johnsoncodehk]

The reminder here in the 0.35.x version will be more friendly. I can see the method type I exported very intuitively, and I don't care about the attributes of the component instance itself, as follows:

Is this an expected behavior? Maybe you can do this function better

It seem that you do not have use InstanceType in this picture so the type is not unwrap yet in hover info, and this is expected TS behavior we can't change it.

[johnsoncodehk]

@exherb AfCard should not report error if it is valid component type. Can you show card.vue content?

[rennzhang]

The reminder here in the 0.35.x version will be more friendly. I can see the method type I exported very intuitively, and I don't care about the attributes of the component instance itself, as follows:
Is this an expected behavior? Maybe you can do this function better

It seem that you do not have use InstanceType in this picture so the type is not unwrap yet in hover info, and this is expected TS behavior we can't change it.

This picture uses VOLAR in version 0.35.2, so there is no need to use the InstanceType, but the type is more friendly

[exherb]

@exherb AfCard should not report error if it is valid component type. Can you show card.vue content?

<template>
  <div>
    <div
      :class="[
        'rounded-t-lg border flex items-center justify-between',
        headerClass,
      ]"
    >
      <slot name="header">
        {{ header }}
      </slot>
    </div>
    <div :class="['rounded-b-lg border-b border-l border-r', bodyClass]">
      <slot />
    </div>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  props: {
    header: {
      type: String,
      default: "",
    },
    headerClass: {
      type: String,
      default: "p-2 text-base",
    },
    bodyClass: {
      type: String,
      default: "p-2",
    },
  },
});
</script>

[exherb]

just a simple component @johnsoncodehk

[johnsoncodehk]

@exherb where are import { defineComponent } from 'vue'? 😅