Question

如果我有一个 Vue3 组件，HelloWorld 就像是

<template>
  <div class="hello">
   {{name}}
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  data() {
    return {
      name: 'hello'
    }
  },
  methods: {
    setName(name: string): void {
      this.name = name
    }
  }
})
</script>

如果我想使用这个组件

<template>
  <div>
    <hello-wrold ref="hello">
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import HelloWolrd from './hello-world'
export default defineComponent({
  mounted () {
    console.log(this.$refs.hello.name) // ?
    this.$refs.hello.setName('stackoverflow') // ?
  }
})
</script>

打字稿无法获得关于 HelloWorld 组件的正确类型，我应该给出什么样的类型？我试过了，不行

  type Hello = typeof HelloWorld;
  (this.$refs.hello as Hello).name

或者这个，也行不通

  type Hello = InstanceType<typeof HelloWorld>;
  (this.$refs.hello as Hello).name

  type Hello2 = ComponentPublicInstance<typeof HelloWorld>;
  (this.$refs.hello as Hello).name

如果我用这种方式，它可以工作，但我认为这不是一个好主意，因为它不是自动的

  type Hello = ComponentPublicInstance<unknown, unknown, { name: string }, ComputedOptions, {setName: (name: string) => void}>
  (this.$refs.hello as Hello).name // can work

那么，我应该使用什么 vue3 API 或 ts API 来自动获取组件类型？

Answer 1

我知道。。InstanceType。这是工作。问题是 Vetur 扩展。

Vue3 打字稿。如何自动获取正确的组件类型

1 个答案: