Vue3+TS使用Bulma-calendar报TS2339：'start'属性不存在错误

问题场景 #

在Vue3 + TypeScript技术栈项目中引入Bulma-calendar日期组件，参考官方示例编写如下功能代码：

new Vue({
  el: '#app',
  data() {
    return {
      date: new Date(),
    }
  },
  mounted() {
    const calendar = bulmaCalendar.attach(this.$refs.calendarTrigger, {
      startDate: this.date,
    })[0]
    calendar.on('select', e => (this.date = e.start || null))
  },
  computed: {
    niceDate() {
      if (this.date) {
        return this.date.toLocaleDateString()
      }
    }
  }
});


// 对应视图代码
<div id='app'>
    Selected date: {{ niceDate }}
    <button ref='calendarTrigger' type='button'>Change</button>
</div> 

代码编写完成后TypeScript抛出TS2339类型错误：Property 'start' does not exist on type 'Event<"select">'
错误截图：

错误原因 #

Bulma-calendar内置的TypeScript类型定义中，默认将select事件的回调参数推导为通用DOM事件类型，该类型上不存在组件自定义抛出的start属性，TS静态类型检查阶段无法识别该属性就会抛出类型错误。另外Vue3中$refs的返回值默认推导为unknown类型，直接传入attach方法也可能触发额外类型提示问题。

解决方案 #

可根据项目实际场景选择以下任意一种方案修复：

• 方案1：局部类型断言（推荐，不丢失整体类型检查能力）
  对事件参数、ref元素做明确的类型断言，仅修正当前位置的类型推导，不影响全局类型校验，修改后mounted钩子代码如下：

  mounted() {
    // 将ref断言为DOM元素类型
    const calendar = bulmaCalendar.attach(this.$refs.calendarTrigger as HTMLElement, {
      startDate: this.date,
    })[0]
    calendar.on('select', (e) => {
      // 将事件参数断言为包含start属性的自定义事件类型
      this.date = (e as { start?: Date | null }).start || null
    })
  }
  

• 方案2：快速跳过类型检查（适合临时调试场景）
  直接将事件参数标记为any类型，跳过TS对该参数的类型校验，修改成本最低但会丢失该位置的类型提示：

  calendar.on('select', (e: any) => (this.date = e.start || null))
  

• 方案3：扩充全局类型定义（适合项目中多处使用Bulma-calendar的场景）
  在项目内任意生效的.d.ts类型声明文件（如src/shims-vue.d.ts）中补充Bulma-calendar的模块类型扩充，一次配置后全项目都能正确识别对应事件类型，无需重复写断言：

  // 注意根据实际安装的bulma-calendar包名调整模块名
  declare module 'bulma-calendar' {
    interface CalendarSelectEvent {
      start?: Date | null
      end?: Date | null
    }
    interface CalendarInstance {
      on(event: 'select', callback: (e: CalendarSelectEvent) => void): void
    }
  }
  

内容的提问来源于stack exchange，提问作者Elias