Electron+Vue3 MAC 版日历开发记录(30)—

这是我参与更文挑战的第30天，活动详情查看：更文挑战

终于到最后一天了，反观这一个月，自己没想到能够坚持下来，每天都挺忙的，也逼着自己没天晚上，不看电视，不玩游戏，不做一些没意义的事情，把所有时间用回来，第一件事就是把当天的记录整理出来，有时候都是一边写代码一边往 Markdown 编辑器粘贴 (这里感谢下 MWeb 这款编辑器，让我省心太多了)。

今天还是有点水，主要还是放在 Warning 的优化上，看看今晚还剩下 21 个 Warning。

看 VSCode 也能看出具体在哪行代码上：

相比于之前的 50 多个，已然少了很多了，着实有点小开心～

优化 events

具体看看这个案例：

其实这个 events 数组在子组件里，我们有引用到 FullCalendar 里定义的 Type：

// FullcalendarSub.vue

import type {
  CalendarApi,
  CalendarOptions,
  DateSelectArg,
  EventClickArg,
  EventInput,
  EventSourceInput,
  DateRangeInput,
  DateInput,
  DayCellContentArg,
} from '@fullcalendar/vue3';

  props: {
    changeShowFestivals: Boolean,
    changeShowWeather: Boolean,
    events: {
      type: Array,
      default: [] as EventInput[],
    },
  },
复制代码

所以这里需要追本溯源找到从 Notion API 返回的数据做类型转变。刚巧，我们的 EventService 返回的结果也没加 return type。

所以可以一并重构了。

先看看 EventInput 追踪代码：

declare const EVENT_REFINERS: {
    extendedProps: Identity<Dictionary>;
    start: Identity<DateInput>;
    end: Identity<DateInput>;
    date: Identity<DateInput>;
    allDay: BooleanConstructor;
    id: StringConstructor;
    groupId: StringConstructor;
    title: StringConstructor;
    url: StringConstructor;
};
复制代码

其中包含了这几个参数，所以我们可以直接 as：

// EventService.ts

import type { EventInput } from '@fullcalendar/vue3';


  list2Events(results: []): EventInput[] {
    const events = results.map((element: any) => {
      return {
        'id': element.id,
        'title': element.properties?.title?.rich_text[0].plain_text,
        'start': element.properties?.start?.date.start,
        'end': element.properties?.end?.date.start,
      } as EventInput;
    });

    return events;
  }
复制代码

然后再回到 Main 页面，我们重新在 data 中去定义我们的 events：

// FullCalendarMain.vue

  data() {
    return {
      location: {},
      changeShowFestivals: false,
      changeShowWeather: false,
      visibleFullDateView: false,
      date: new Date(),
      visibleECSub: false,
      events: [] as EventInput[],
      event: null as EventInput,
复制代码

执行 yarn lint 看看：