将 refs 与 Vue 3 + TypeScript + Options API 一起使用

Question

我试图了解将 refs 与 TypeScript 和 Options API 一起使用的最佳方式。在文档中，他们像下面一样引用它，但没有使用 TS。当谈到 TS 时，他们只解释了如何使用 Composition API。

当我使用this.$refs.myRef它时会抛出此错误Object is of type 'unknown'.

我知道我可以像这样投射和使用它：(this.$refs.myRef as HTMLElement)但我觉得没有必要每次都对每个裁判都这样做。

使用 Options API + TS 引用的正确方法是什么？

Answer 1

我创建了一个这样的垫片：

shims-runtime-core.d.ts

import * as runtimeCore from '@vue/runtime-core'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $refs: {
      [key: string]: HTMLElement|any,
    },
    // ... more stuff
  }
}

然后我就可以像平常一样访问参考文献了。