如何从Vite构建的库产物中获取全局引用与类型提示

你只需要为你的库补充全局类型声明文件，再通过三斜杠指令引用该声明文件，即可实现和jQuery一致的全局智能提示效果，具体操作如下：

• 第一步：编写类型声明文件
  在你的库产物目录下新增.d.ts后缀的声明文件，例如命名为my-utils.d.ts，按你的导出内容写对应的类型声明：

  // 全局声明两个方法
  declare function addData(key: string, value: any): void;
  declare function getData(key: string): any;
  
  // 如果你的UMD包是挂载到window上的，可额外补充Window接口声明保证兼容性
  interface Window {
    addData: typeof addData;
    getData: typeof getData;
  }
  
  export {}
  

  末尾的export {}是必填项，用于告诉TS该文件是模块文件，保证全局声明生效
• 第二步：在需要智能提示的JS文件头部添加三斜杠引用指令
  将路径替换为声明文件的实际相对路径即可：

  /// <reference path="../dist/my-utils.d.ts" />
  

配置完成后，你在对应文件中直接调用addData、getData时，就能获得代码补全、类型校验的智能提示，不需要实际导入库文件。

如果你的库是用TypeScript编写的，可直接在tsconfig.json中开启declaration: true配置，构建时会自动生成.d.ts文件，你只需要在自动生成的声明文件基础上补充上述全局声明逻辑即可。

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