Question

我正在使用VueJS和Typescript，而不是在使用类样式Vue组件。

说我有以下Vue组件。

<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>

如何正确注释component方法中的someMethod变量，以便Typescript编译器知道$props等属性？

以下（这是我最初的本能）不起作用。

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

Answer 1

在vue + vscode生态系统中，现在typescript无法从模板声明中推断类型。（也许会）

和$ refs [xxx]：

输入'Vue |元素| Vue [] |元素[]'不可分配为'Vue'类型。

您可以改用类型断言：

const component = this。$ refs [“ component”]作为MyComponent的类型；

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

1 个答案: