基于打字稿类的组件中的Vuetify日历

Question

我正在尝试设置一个日历，就像the one on vuetify's page

唯一的区别是我在 typescript 中使用类组件而不是 javascript。

我在调用this.$refs.calendar.some_function 时遇到错误，它们是included in the documentation

“Vue | 类型”上不存在属性“getFormatter”元素 | Vue[] |元素[]'。 “Vue”类型上不存在属性“getFormatter”。

“Vue | 类型”上不存在属性“prev”元素 | Vue[] |元素[]'。 类型“Vue”上不存在属性“prev”。

“Vue | 类型”上不存在“下一个”属性元素 | Vue[] |元素[]'。 类型“Vue”上不存在属性“next”。

以及浏览器中控制台的各种错误，例如：

属性或方法“setToday”未在实例上定义，但在渲染期间被引用

我为每个功能都得到了这些。可能是因为打字稿有编译错误？

模板看起来和他们页面上的完全一样，我的类看起来像这样（删除了一些不受错误影响的功能）：

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';

@Component
export default class AboutComponent extends Vue {
  private today: string = '2019-01-08';
  private focus: string = '2019-01-08';
  private type: string = 'month';
  private typeToLabel: any = {
    month: 'Month',
    week: 'Week',
    day: 'Day'
  };
  private start: any = null;
  private end: any = null;
  private selectedEvent: any = {};
  private selectedElement: any = null;
  private selectedOpen: boolean = false;
  private events: any[] = []; // Same events as on their page

  private get title () {
    const { start, end } = this;
    if (!start || !end) {
      return '';
    }

    const startMonth: any = this.monthFormatter(start);
    const endMonth: any = this.monthFormatter(end);
    const suffixMonth: any = startMonth === endMonth ? '' : endMonth;

    const startYear: any = start.year;
    const endYear: any = end.year;
    const suffixYear: any = startYear === endYear ? '' : endYear;

    const startDay: string = start.day + this.nth(start.day);
    const endDay: string = end.day + this.nth(end.day);

    switch (this.type) {
      case 'month':
        return `${startMonth} ${startYear}`;
      case 'week':
        return `${startMonth} ${startDay} ${startYear} - ${suffixMonth} ${endDay} ${suffixYear}`;
      case 'day':
        return `${startMonth} ${startDay} ${startYear}`;
    }
    return '';
  }

  private get monthFormatter () {
    return this.$refs.calendar.getFormatter({
      timeZone: 'UTC', month: 'long'
    });
  }

  private prev () {
    this.$refs.calendar.prev();
  }

  private next () {
    this.$refs.calendar.next();
  }
}
</script>

如何让 TypeScript 知道这些函数存在于该类型上？谢谢！

Answer 1

在this question.找到我的答案

我在代码中添加了以下内容：

private get calendarInstance (): Vue & { prev: () => void, next: () => void,
    getFormatter: (format: any) => any } {
      return this.$refs.calendar as Vue & { prev: () => void, next: () => void, getFormatter: (format: any) => any };
    }

并将引用 this.$refs.calendar 的函数更改为

private get monthFormatter (): any {
  return this.calendarInstance.getFormatter({
    timeZone: 'UTC', month: 'long'
  });
}

private prev (): void {
  this.calendarInstance.prev();
}

private next (): void {
  this.calendarInstance.next();
}