时间戳

首页 > 解决方案 > 基于打字稿类的组件中的Vuetify日历

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

问题描述

我正在尝试设置一个日历，就像vuetify 页面上的日历一样

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

我收到文档this.$refs.calendar.some_function 中包含的调用错误

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

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

'Vue | 类型不存在属性'next' 元素 | 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 知道这些函数存在于该类型上？谢谢！

标签： typescriptvue.jsvuetify.js

解决方案

在这个问题中找到了我的答案。

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

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();
}

推荐阅读