VUE3+TS method to obtain component types
Methods to get component type
const AccountRef = ref<InstanceType<typeof LoginAccount>>()
The pitfall encountered
typeof LoginAccount keeps reporting red line error
LoginAction: () => vo...' provides no match for the signature 'new (...args: any): any'.
Cause of the problem
We use webstorm codeing, and create a new vue file through webstorm right-click. The created file does not contain defineComponent, so the above-mentioned red line is always reported.
<script lang="ts">
export default {
}
</script>
Solution
Reference defineComponent
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({//Note that the brackets here cannot be missed
})
</script>
VUE3+TS obtain component ref instance
When using vue3 and ts, in order to get the component ref instance, you need to specify the type in the generics of the ref function.
How to get the type of component?
In the official vue document, TypeScript support has already told us a method to obtain component types, InstanceType<typeof component name>
How to use it is as follows:
const $userForm = ref<InstanceType<typeof userForm>>();
Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.