How to solve the pitfalls encountered by VUE3+TS in obtaining component types

VUE3 TS method of obtaining component type pitfalls

Method of obtaining component type

const AccountRef = ref<InstanceType<typeof LoginAccount>>()

pitfalls encountered

typeof LoginAccount keeps reporting a red line prompt error

LoginAction: () => vo...' provides no match for the signature 'new (...args: any): any'.

Cause of the problem

I use webstorm coding, and create a new vue file through webstorm's own right-click, and the created file does not have defineComponent, so Resulting in the above red line that always reports

<script lang="ts">
export default {

}
</script>

Solution

Reference defineComponent

<script lang="ts">
import { defineComponent } from &#39;vue&#39;
export default defineComponent({//注意这里的这个小括号不能漏

})
</script>

VUE3 TS obtains the component ref instance

When using vue3 and ts, in order to obtain For component ref instances, you need to specify the type in the generic type of the ref function.

How to get the type of component?

TypeScript support in the official documentation of vue has told us a method to obtain the component type. InstanceTypef9b6eb30120e4f46d5ca46914342d2de

The usage method is as follows:

const $userForm = ref<InstanceType<typeof userForm>>();

The above is the detailed content of How to solve the pitfalls encountered by VUE3+TS in obtaining component types. For more information, please follow other related articles on the PHP Chinese website!