如何在jQuery Widget文件内声明TypeScript全局类型定义，无需维护两份文件？

其实TypeScript完全支持直接在jQuery组件文件里嵌入类型声明，刚好能解决你要维护两个文件的麻烦，具体有几种实用的实现方式：

• 用JSDoc注释结合TypeScript类型（适合JS组件）：如果你的组件是JavaScript编写的，直接在全局变量或jQuery插件的JSDoc里写类型定义就可以。比如给自定义jQuery插件加类型：

  /**
   * @typedef {Object} MyPluginOptions
   * @property {string} text - 插件显示的文本内容
   * @property {number} delay - 执行延迟时间（单位：毫秒）
   */
  
  /**
   * 我的自定义jQuery插件
   * @param {MyPluginOptions} options - 插件的配置参数
   * @returns {JQuery} 返回jQuery实例对象
   */
  $.fn.myPlugin = function(options) {
    // 这里写插件的具体逻辑
    return this;
  };
  

  只要你的TypeScript项目配置里开启了allowJs和checkJs（在tsconfig.json中设置），TypeScript就能自动识别这些JSDoc里的类型，完全不需要单独维护.d.ts文件。

• 直接在TS文件中整合类型与组件代码：如果你的组件本身就是用TypeScript写的，那就更方便了，直接在同一个文件里定义类型，再挂载到jQuery全局上：

  // 先定义插件的配置类型
  interface MyPluginOptions {
    text: string;
    delay: number;
  }
  
  // 扩展jQuery的全局接口
  declare global {
    interface JQuery {
      myPlugin(options: MyPluginOptions): JQuery;
    }
  }
  
  // 实现jQuery插件
  $.fn.myPlugin = function(options: MyPluginOptions) {
    // 插件逻辑代码
    return this;
  };
  

  这种方式下，类型定义和组件代码完全在一个文件里，修改组件功能时可以直接同步更新类型，再也不用来回切换到customTypes目录的.d.ts文件了。

不过有个小细节需要注意：如果这个jQuery组件是要分发给多个项目使用的，单独的.d.ts文件可能更适合作为类型包来分发；但如果只是你自己项目内部使用，在组件文件内嵌入类型绝对是更高效、更省心的选择，能大幅减少维护成本。

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