script-setup use `defineExpose`, component should have typescript declaration

[liuzw2579]

What problem does this feature solve?

when my vue component 'MyComponent' use eg: defineExpose({ a: 1 }), component instance can use instanceRef.value.a, but component typescript declaration not have field a when via InstanceType<typeof MyComponent>

What does the proposed API look like?

nothings

[klwfwdk]

Calling ctx.expose while using setup function in defineComponent seems to have the same problem

[zhuchentong]

I have same problem, when run vue-tsc will show error

error TS2339: Property 'getFormValue' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<Readonly<{ page?: unknown; forms?: unknown; } & {} & { page?: PageService | undefined; forms?: TableFormConfig[] | undefined; }> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>; ... 10 more ...; $watch(source: string | Function...'.

but i don't konw how to fixed it

[MichaelGitArt]

The problem still exists...

// HighFiveOverlay.vue
defineExpose({
  onPlay,
})

 const highFiveOverlayRef = ref<InstanceType<typeof HighFiveOverlay> | null>(null)

  if (highFiveOverlayRef.value) {
    highFiveOverlayRef.value.onPlay()
  }

Property 'onPlay' does not exist on type '{ $: ComponentInternalInstance; $data...

[Blackfaded]

Having the same issue. Any Workaround available?

[nyancodeid]

Having the same issue here.

[luyuhong0329]

Having the same issue.Only checking by as any.

// login-panel.vue
import LoginAccount from './login-account.vue';
const accountRef = ref<InstanceType<typeof LoginAccount>>()
const handleLoginClick = () => {
(accountRef.value as any)?.loginAction()
}`

// login-account.vue
const loginAction = () => {
console.log('login')
}
defineExpose({
loginAction,
})

[johnsoncodehk]

We should narrow the problem to this code, because defineExpose is syntactic sugar of it.

defineComponent({
  setup(_, { expose }) {
    expose({ a: 1 })
  }
})

IMO expose should not affect component type declaration, this is an API design issue rather than an implementation issue.

[aradalvand]

Any updates on this one?
This would genuinely improve the developer experience.
This issue is also the fourth most upvoted open issue in this repo.

[NoelDeMartin]

In case this is useful for anyone, here's my current workaround:

MyComponent.d.ts

export interface IMyComponent {

    doSomething(): void;

}

MyComponent.vue

<script setup lang="ts">
    import type { IMyComponent } from './MyComponent';

    defineExpose<IMyComponent>({
        doSomething() {
            // ...
        },
    });
</script>

I don't use the I prefix in all interfaces, but in this case I think it's useful to distinguish from the component itself. You could also call it MyComponentPublicAPI or anything else.

As per where to place the interface declaration, as far as I understand it's not possible to add it in the .vue file itself, because these files are all resolved with a generic shim. So, even if you prefer to import it from ./MyComponent.vue, you'll have to declare it in a declaration file anyways, so I don't think that's worth the trouble.