如何在TypeScript中通过Rollup使用非模块库并解决类型提示问题

不用修改第三方库本身，通过自定义类型声明文件配合Rollup配置就能解决VSCode的报错，同时保留代码补全功能，具体步骤如下：

1. 创建类型声明文件（.d.ts） #

在项目中新建一个和第三方库对应的类型声明文件（比如third-party-lib.d.ts），用来告诉TypeScript这个非模块库的导出结构，同时保留原库的JSDoc注释。

情况一：原库暴露单个全局函数 #

如果第三方库只暴露了一个全局函数（比如libraryFunction），可以这样写：

/// <reference path="./path/to/third-party-lib.js" />
declare module 'third-party-lib' {
  // 直接复用原库的JSDoc，或者复制原库中函数的注释到这里
  /**
   * 原库中libraryFunction的JSDoc注释内容
   * @param param1 参数说明
   * @param param2 参数说明
   * @returns 返回值说明
   */
  export default function libraryFunction(...args: Parameters<typeof window.libraryFunction>): ReturnType<typeof window.libraryFunction>;
}

情况二：原库暴露多个全局变量 #

如果库暴露了多个全局成员，先声明全局接口，再导出：

declare global {
  interface Window {
    /**
     * 全局函数A的JSDoc注释
     */
    libFuncA: (a: number, b: string) => boolean;
    /**
     * 全局对象B的JSDoc注释
     */
    libObjB: {
      version: string;
      init: () => void;
    };
  }
}

declare module 'third-party-lib' {
  export const libFuncA = window.libFuncA;
  export const libObjB = window.libObjB;
}

最后在tsconfig.json的include数组中添加这个声明文件，确保TypeScript能识别：

{
  "include": [
    "src/**/*",
    "./third-party-lib.d.ts"
  ]
}

2. 确保Rollup Legacy插件配置正确 #

在Rollup配置文件中，明确指定第三方库对应的全局变量名，让插件将全局变量转为模块导出，和类型声明的导出对应：

import legacy from '@rollup/plugin-legacy';

export default {
  // 其他配置...
  plugins: [
    legacy({
      // key是第三方库的路径，value是它暴露的全局变量名
      './path/to/third-party-lib.js': 'libraryFunction'
    })
  ]
};

3. 实现代码补全 #

如果原库本身带有规范的JSDoc注释，只要在类型声明文件中通过/// <reference path="./path/to/third-party-lib.js" />引入原库文件，TypeScript会自动读取原库的JSDoc，在编辑器中提供代码补全和提示。如果原库的JSDoc不规范，直接把注释复制到类型声明文件对应的成员上即可。

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