Vue3+TypeScript中jq.Schedule安装使用问题及解决方法

遇到的问题 #

在Vue3+TS项目中使用jq.Schedule时先后碰到两个核心报错：

1. TypeScript类型检查报错：TS2339: Property 'timeSchedule' does not exist on type 'JQuery'
2. 项目运行时报错：ReferenceError: jQuery is not defined

最初按常规流程执行了以下安装命令：

npm i jq.schedule --save
npm install jquery jquery-ui --save
npm install @types/jquery @types/jqueryui --save-dev

但导入后发现类型定义文件存在问题，参考常规教程也无法解决jQuery未定义的运行时错误，最终通过以下步骤解决。

解决步骤 #

1. 安装全局注入插件 #

安装@rollup/plugin-inject，用于给Vite全局注入jQuery：

npm install @rollup/plugin-inject --save-dev

2. 配置Vite注入jQuery #

修改vite.config.ts（或.js），添加inject插件配置，将jQuery和$全局注入到项目中：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import inject from '@rollup/plugin-inject'

export default defineConfig({
  plugins: [
    vue(),
    inject({
      jQuery: 'jquery',
      $: 'jquery'
    })
  ]
})

3. 正确引入样式与脚本 #

在项目入口文件main.ts中仅引入jq.Schedule的必要文件，不要导入jquery-ui.css，避免触发不必要的警告：

// 引入jq.Schedule核心样式
import 'jq.schedule/dist/css/jq.schedule.min.css'
// 引入jq.Schedule核心脚本
import 'jq.schedule/dist/js/jq.schedule.min.js'

4. 修复TypeScript类型报错 #

由于现有@types库中未包含timeSchedule的类型定义，手动扩展JQuery类型：
在src/types目录下新建jquery.d.ts文件，写入以下内容：

interface JQuery {
  timeSchedule(options?: Record<string, any>): JQuery;
}

完成后TypeScript即可识别timeSchedule方法，类型检查报错将被消除。

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