When defineComponent uses the function signature method, the expose function loses its type

[fslflame]

Vue version

3.4.21

Link to minimal reproduction

https://github.com/fslflame/demo

Steps to reproduce

1. The child component uses tsx file to return a rendering function. The defineComponent function signature method is used to expose the Expose for external use. The parent component obtains the ref instance of the child component and uses InstanceType to read the typeof the child component. The expose type does not exist. It cannot be inferred automatically, but it can be inferred automatically if the component uses defineExpose to expose data

What is expected?

defineExpose and expose should be consistent

What is actually happening?

1. The child component uses tsx file to return a rendering function. The defineComponent function signature method is used to expose the Expose for external use. The parent component obtains the ref instance of the child component and uses InstanceType to read the typeof the child component. The expose type does not exist. It cannot be inferred automatically, but it can be inferred automatically if the component uses defineExpose to expose data

System Info

No response

Any additional comments?

No response

[fslflame]

[yyx990803]

I don't think there is a fix for this, since it's impossible to infer the type passed to expose in the return type of defineComponent in TypeScript.

The workaround is exporting your expose type as a separate interface:

import { defineComponent } from 'vue';

export inteface Exposed {
  getClipDataURL: number
}

export default defineComponent((_, { expose }) => {
  expose({
    getClipDataURL: 1,
  } as Exposed);
  return () => <div>8888</div>;
});

And in other components, import the Exposed interface directly instead of extracting it using InstanceType.

[fslflame]

我认为这个问题没有解决办法，因为无法推断TypeScriptexpose的返回类型中传递的类型。defineComponent

解决方法是将公开类型导出为单独的接口：

import { defineComponent } from 'vue';

export inteface Exposed {
  getClipDataURL: number
}

export default defineComponent((_, { expose }) => {
  expose({
    getClipDataURL: 1,
  } as Exposed);
  return () => <div>8888</div>;
});

而在其他组件中，Exposed直接导入接口，而不是使用InstanceType.

Although this method is feasible, I need to get the component instance through InstanceType, if you specify Exposed then I can not get the component instance ref, is there no two ways?
Because the expose method is part of the component instance

[fslflame]