Typescript 如何在vue 3中的`defineComponent（）`中键入vue实例？

正如您所知，在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>

我要给出的“简单”答案是使用

ReturnType

，但它不包含任何类型信息。当我开始研究如何将

ReturnType

与通用方法结合使用时，我倒了下去

但是，在查看之后，vue有一个导出类型，可以非常轻松地使用它。也有一些不同的通用参数

从“vue”导入{ComponentPublicInstance}；
let实例：ComponentPublicInstance；

/// another ts file.
let modal:???; // what the `???` should be?

modal.$props.foo // infer `$props.foo` correctly