Question

那样设置日历

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

我在included in the documentation的this.$refs.calendar.some_function呼叫中遇到错误

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

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

类型'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知道这些函数存在于该类型上？谢谢！

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

在基于打字稿类的组件中审核日历

1 个答案: