如你所知,从Vue 3开始,组件可以用TypeScript编写:
/// modal.vue
<template>
<div class="modal"></div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "Modal",
props: {
foo: String,
bar: String
},
mounted() {
this.$props.foo // how to type `this` out of this context?
}
});
</script>
我的问题是如何从defineComponent
函数中输入vue示例?
/// another ts file.
let modal:???; // what the `???` should be?
modal.$props.foo // infer `$props.foo` correctly
2条答案
按热度按时间brjng4g31#
我想给予的“简单”答案是使用
ReturnType<typeof defineComponent>
,但是它不携带任何类型信息。当我开始研究如何将ReturnType
与泛型方法一起使用时,我陷入了stackoverflow的兔子洞,这些似乎需要探索然而,在看过之后,vue有一个导出的类型
ComponentPublicInstance
,可以相当容易地使用。ComponentPublicInstance
也有一些不同的泛型参数。polkgigr2#
使用TypeScript的内置
InstanceType
实用程序提取其示例类型另一个使用实用程序类型: