自定义bs-confirmation模块编译报错:JQuery无confirmation属性
confirmation属性的问题 嘿,Andrew,我来帮你搞定这个问题!你遇到的Property 'confirmation' does not exist on type 'JQuery'错误,本质是TypeScript找不到bs-confirmation插件对应的类型定义——而把文件放到node_modules/@types能生效,是因为TS默认会自动扫描这个目录下的所有类型包。
要在自定义目录下让TS识别你的类型定义,不用动node_modules,可以按下面几种方法来做:
方法一:配置typeRoots指定自定义类型目录
TypeScript的typeRoots选项可以告诉编译器除了默认的@types,还要扫描哪些目录下的类型包。
先整理你的自定义类型文件结构:
假设你的自定义类型目录是src/types,那么把bs-confirmation.ts改成index.d.ts,放到src/types/bs-confirmation/目录下(每个类型包对应一个子目录,TS会自动识别)。文件内容保持不变:/// <reference types="jquery" /> declare interface JQuery { confirmation(options?: Record<string, any>): JQuery; // 可以根据插件实际API补充更多方法,比如confirmation('show')之类的重载 }在
tsconfig.json的compilerOptions里添加typeRoots:{ "compilerOptions": { // 你的其他配置(比如target、module等) "typeRoots": [ "./node_modules/@types", // 保留默认的@types目录 "./src/types" // 新增你的自定义类型目录 ] } }
这样TS编译时就会自动加载src/types/bs-confirmation下的类型定义,不用手动引用。
方法二:用include直接包含类型文件
如果不想调整目录结构,也可以直接在tsconfig.json里指定要包含你的自定义类型文件:
{ "compilerOptions": { // 你的其他配置 }, "include": [ "./src/**/*", // 包含你的业务代码 "./path/to/your/bs-confirmation.ts" // 直接指定类型文件的路径 ] }
注意把./path/to/your/换成你实际存放bs-confirmation.ts的目录路径。
方法三:在业务代码中手动引用类型文件
如果只是个别文件需要用到这个类型,可以在业务脚本(比如my-script.ts)的开头添加引用注释:
/// <reference path="../path/to/bs-confirmation.ts" /> // 之后就可以正常使用$('#element').confirmation()了 $('#myBtn').confirmation({ title: '确认删除?' });
几个关键注意事项
- 你的类型文件必须正确扩展全局的
JQuery接口:直接用declare interface JQuery,不要包裹在module或namespace里,这样才能和@types/jquery里的接口合并。 - 确保
tsconfig.json的moduleResolution是node(这是默认值,一般不用改),TS才能正确解析类型路径。 - 永远不要修改
node_modules目录下的内容——这个目录是依赖管理的,你的自定义类型文件应该放在自己的源码目录里,避免被npm更新覆盖或.gitignore忽略。
这样调整后,你就不用把类型文件放到node_modules/@types里,也能正常编译啦!
内容的提问来源于stack exchange,提问作者Andrzej Pakuła




