使用Typescript时如何将Vue中的变量注释为Vue组件？

Question

I'm using VueJS and Typescript and I am not using Class-Style Vue Components.

Say I have the following Vue component.

<template>
    <my-component ref="component"/>
</template>

<script lang="ts">
import MyComponent from "@/components/my-component.vue";

export default Vue.extend({
    components: {
        MyComponent,
    },
    methods: {
        async someMethod() {
            // How do I annotate the following component variable as type "MyComponent"?
            const component = this.$refs["component"];
            console.log(component.$props);
        },
    },
});
</script>

How do I annotate the component variable in the someMethod method properly so that the Typescript compiler is aware of properties like $props etc.?

The following (which was my initial instinct) does not work.

const component: MyComponent = this.$refs["component"];

Answer 1

in vue+vscode ecosystem, now typescript cannot infer type from template declaration. (maybe it will be)

and for $refs[xxx]:

Type 'Vue | Element | Vue[] | Element[]' is not assignable to type 'Vue'.

you can use type assertions instead:

const component = this.$refs["component"] as typeof MyComponent;