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

Posted 2023-02-22

【中文标题】基于打字稿类的组件中的Vuetify日历

【英文标题】：Vuetify calendar in typescript class based component

【发布时间】：2019-12-16 07:33:52

【问题描述】：

我正在尝试设置一个日历，就像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 知道这些函数存在于该类型上？谢谢！

【参考方案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();

【讨论】：

我遇到了和你一样的问题。我从 vuetify 为 typescript 重写了整个事件示例：gist.github.com/Nicklas2751/da1fbe81878df7bb531fa4978c0ce7a8