解决声明 global.d.ts 遇到的问题

问题背景

为了避免将一些体积较大的库打包进我们的代码中，我们采用了以 UMD 形式提供的第三方库。然而，在使用这些库时，我们需要在 window 对象上增加一些相关的声明。为了实现这个目的，我们创建了一个名为 global.d.ts 的声明文件，并添加了相应的声明：

declare global {
  interface Window {
    opensheetmusicdisplay: any
    mermaid: any
    vextab: any
  }
}

我们还将这个声明文件添加到了 tsconfig.json 的 include 配置中。

然而，在使用时，TypeScript 编译器仍然提示找不到 window 上的相关属性，似乎并没有生效。

解决方案

经过一番搜索和探索，我们找到了解决办法：在 global.d.ts 文件的开头添加 export {} 语句。这样一来，我们明确告诉编译器这是一个模块的声明文件，而不是一个全局变量的声明文件。这种方式使得全局扩展能够被正确地识别和使用。

更新后的 global.d.ts 文件如下所示：

+ export {}

declare global {
  interface Window {
    opensheetmusicdisplay: any
    mermaid: any
    vextab: any
  }
}

现在，重新编译项目并使用这些全局属性，TypeScript 编译器将会为我们提供正确的类型提示和类型检查支持。

通过这种方式，我们成功解决了在声明 global.d.ts 文件时遇到的问题，使得全局声明能够在我们的项目中正常工作。

Using Next.js with TypeScript

声明文件 - declare global

How to configure custom global interfaces (.d.ts files) for TypeScript?