You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

自定义bs-confirmation模块编译报错:JQuery无confirmation属性

解决TypeScript中JQuery无confirmation属性的问题

嘿,Andrew,我来帮你搞定这个问题!你遇到的Property 'confirmation' does not exist on type 'JQuery'错误,本质是TypeScript找不到bs-confirmation插件对应的类型定义——而把文件放到node_modules/@types能生效,是因为TS默认会自动扫描这个目录下的所有类型包。

要在自定义目录下让TS识别你的类型定义,不用动node_modules,可以按下面几种方法来做:

方法一:配置typeRoots指定自定义类型目录

TypeScript的typeRoots选项可以告诉编译器除了默认的@types,还要扫描哪些目录下的类型包。

  1. 先整理你的自定义类型文件结构:
    假设你的自定义类型目录是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')之类的重载
    }
    
  2. tsconfig.jsoncompilerOptions里添加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,不要包裹在modulenamespace里,这样才能和@types/jquery里的接口合并。
  • 确保tsconfig.jsonmoduleResolutionnode(这是默认值,一般不用改),TS才能正确解析类型路径。
  • 永远不要修改node_modules目录下的内容——这个目录是依赖管理的,你的自定义类型文件应该放在自己的源码目录里,避免被npm更新覆盖或.gitignore忽略。

这样调整后,你就不用把类型文件放到node_modules/@types里,也能正常编译啦!

内容的提问来源于stack exchange,提问作者Andrzej Pakuła

火山引擎 最新活动