FullCalendar-vue + Typescript: 属性 'getApi' 不存在

Question

我正在尝试将 FullCalendar-vue 与 Typescript 一起使用，但在访问它的 API.

时 运行 出错了

我的日历是这样设置的：

<FullCalendar ref="fullCalendar" :options="calendarOptions" style="width: 100%" />

为了方便起见，我使用计算的 属性 使 API 在我的整个组件中可用：

computed: {
  calendar() {
    return this.$refs.fullCalendar.getApi() // Property 'getApi' does not exist on type 'Vue | Element | Vue[] | Element[]'.
  },
}

如您所见，我收到以下错误：

Property 'getApi' does not exist on type 'Vue | Element | Vue[] | Element[]'.

我不知道如何告诉 VS Code this.$refs.fullCalendar 是一个 Calendar 实例。

Answer 1

快速而肮脏的方式：

computed: {
  calendar() {
    return (this.$refs.fullCalendar as InstanceType<typeof FullCalendar>).getApi()
  },
}

如果您使用合成 API:

  ...
  const fullCalendar = ref<InstanceType<typeof FullCalendar>>()

---

InstanceType 是一个实用程序类型，用于获取 class 实例化的结果类型。