在TypeScript中混用Bootstrap与jQueryUI出现tooltip属性重复报错如何解决

冲突原因 #

该报错是因为@types/bootstrap和@types/jqueryui均对全局JQuery接口扩展了tooltip属性，导致类型声明重复。以下是三种可行的解决方案：

方案1：快速屏蔽库类型检查 #

适合仅使用其中一款工具的tooltip功能，需要快速解决编译报错的场景。
在项目的tsconfig.json的compilerOptions节点中添加配置：

{
  "compilerOptions": {
    "skipLibCheck": true
  }
}

该配置仅跳过第三方声明文件的类型校验，不会影响业务代码的正常类型检查。

方案2：自定义声明覆盖冲突属性 #

适合需要同时使用两款工具的tooltip功能的场景。
在项目中新建一个全局声明文件，比如typings/jquery.d.ts，手动扩展JQuery接口明确tooltip的类型：

interface JQuery {
    // 兼容Bootstrap tooltip调用
    tooltip(options?: import('bootstrap').Tooltip.Options): JQuery;
    tooltip(method: 'show' | 'hide' | 'toggle' | 'dispose'): JQuery;
    // 兼容jQueryUI tooltip调用
    tooltip(options?: JQueryUI.TooltipOptions): JQuery;
    tooltip(method: 'open' | 'close' | 'destroy'): JQuery;
}

TypeScript会优先使用你自定义的声明，自动适配两种tooltip的参数类型，不会再报重复属性错误。

方案3：模块化导入避免全局污染 #

如果项目使用前端构建工具打包资源，可以放弃全局挂载的方式，单独导入对应库的能力从根源避免冲突：

// 单独调用Bootstrap tooltip，不挂载到JQuery实例
import * as bootstrap from 'bootstrap';
const bsTooltip = new bootstrap.Tooltip(document.querySelector('#bs-tooltip'));
bsTooltip.show();

// JQuery实例仅使用jQueryUI的tooltip
import 'jqueryui';
$('#ui-tooltip').tooltip();

这种方式下Bootstrap的tooltip不会注册到全局JQuery接口上，完全避免类型冲突。

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