在TypeScript编写的Vue组件中使用Summernote遇TS2339错误求助

这个问题我之前在项目里也碰到过，本质是TypeScript不知道jQuery对象被Summernote扩展了summernote()方法，所以抛出了类型不存在的错误。下面给你几个靠谱的解决办法：

方法一：安装Summernote的类型声明包 #

TypeScript需要对应的类型定义来识别jQuery上扩展的方法，直接安装官方维护的类型包即可：

npm install @types/summernote --save-dev
# 或者使用yarn
yarn add @types/summernote --dev

安装完成后，TypeScript会自动识别这个类型定义，一般情况下错误就会消失。如果还是有问题，可以检查下你的tsconfig.json，确保compilerOptions里的types数组包含summernote（如果没有这个配置项，默认会自动扫描node_modules/@types下的包）。

方法二：手动声明jQuery的扩展接口 #

如果安装类型包后依然报错，或者你不想额外安装依赖，可以在组件文件顶部或者项目的全局类型声明文件（比如src/types/global.d.ts）里手动添加接口声明：

declare interface JQuery {
  // 适配初始化的调用方式
  summernote(options?: Record<string, any>): JQuery;
  // 适配调用方法的方式，比如$('#summernote').summernote('code')
  summernote(methodName: string, ...args: any[]): any;
}

这样TypeScript就会知道JQuery类型上存在summernote方法了。

额外优化建议 #

在Vue组件里，更推荐使用ref来获取DOM元素，而不是依赖id选择器，这样更符合Vue的组件化思想：

mounted() {
  // 使用ref替代id选择器
  $(this.$refs.mysummernote).summernote();
}

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