如何覆盖 TypeScript UMD 全局类型定义？答案

【问题标题】：How to override a TypeScript UMD global type definition?如何覆盖 TypeScript UMD 全局类型定义？
【发布时间】：2019-09-29 22:12:19
【问题描述】：

我已经安装了three@^0.103.0，它有自己的类型定义。

在我的项目的src/global.d.ts 中，我有：

import * as _THREE from 'three'

declare global {
    const THREE: typeof _THREE
}

然后在src/global.ts我有

import * as THREE from 'three'
(window as any).THREE = { ...THREE }

然后在src/my-code.js 中，我尝试使用THREE 作为全局变量，f.e.

console.log(new THREE.Vector3(1,2,3)) // ERROR, 'THREE' refers to a UMD global, but the current file is a module. Consider adding an import instead.

它告诉我'THREE' refers to a UMD global, but the current file is a module. Consider adding an import instead.。

当我跳转到THREE 的定义时，它会将我带到node_modules/three/src/Three.d.ts，这不是我的src/global.d.ts 文件。

那么，TypeScript 似乎忽略了我的 global.d.ts 定义？

我的tsconfig.json 包含

  "allowJs" true,
  "checkJs" true,
  "include": ["src/**/*"]

我有global.d.ts 在src 内。

如果我添加

/// <reference path="./global.d.ts" />

到 src/my-code.js 文件 (JavaScript) 的顶部，然后它可以工作，我可以跳转到 THREE 的定义，这会将我带到我的 global.d.ts 文件。

为什么没有reference 评论就不能工作？

【问题讨论】：

那么，您要覆盖全局THREE？这样做的理由是什么？
@AndrewEisenberg 没有全局三；我想将它导入我的global.ts 模块并使其成为全球性的。但是在我的src/my-code.ts 文件中，我收到了错误'THREE' refers to a UMD global, but the current file is a module. Consider adding an import instead.。如何导入 THREE 并使其在一个模块中成为全局变量，并在其他模块中用作全局变量？
Mohamed Hegazy 说“一个模块（即一个至少有一个顶级导入或导出的文件）有自己的范围，除非导出，否则此文件中的声明在其外部不可见。”在github.com/Microsoft/TypeScript/issues/…。这是问题吗？我在一个模块中导入三个并声明一个全局，并且这个定义在文件之外不可见（除非我使用 reference 例如）？如何从'three' 获取定义并使其成为全球性的？
@AndrewEisenberg 我认为我的设置有问题：即使我在我的global.d.ts 文件中只放了declare var foo: number，然后在任何其他.js 文件中我尝试console.log(foo) 和它抱怨找不到foo。我想我可能会结束这个问题。
@AndrewEisenberg 哦，我明白了问题所在。我有src/global.ts 和src/global.d.ts，TypeScript 显然合并为一个（或其他东西）。一旦我以不同的方式重命名它们（例如make-global.ts 和global.d.ts），一切就开始工作了。我正在拔头发。

【解决方案1】：

以上应该可以。只有一个小问题：

这两个global文件同名！（即global.ts和global.d.ts）

在这种情况下，TypeScript 似乎将它们合并在一起（或其他东西），因此似乎将 global 视为同一个模块（如 import './global' 模棱两可）。

因此，通过将一个模块重命名为不同的名称，一切正常。

比如将src/global.ts重命名为src/make-global.ts，留下src/global.d.ts，就可以了。

在我重命名其中一个文件之前，我一直想知道发生了什么。

【讨论】：

您已正确识别错误的来源，但您的解决方案过于复杂，因为您最好将所有代码放在一个文件 src/global.ts 文件中。我在这个答案中详细介绍了这个主题stackoverflow.com/a/43674912/1915893
@AluanHaddad 那里有很好的信息。谢谢！

【解决方案2】：

你应该检查handbook中的TypeScript类型解析策略。

如上所述，.ts 文件优先于 .d.ts。

（我自己也遇到了同样的问题）

【讨论】：

【解决方案3】：

对于three.js，您可以在tsconfig.json 中声明编译器选项allowUmdGlobalAccess：

"compilerOptions": {
    "allowUmdGlobalAccess": true,
}

这将使 typescript 可以访问您的项目全局 UMD，安装时会在其中列出 three.js。然后你可以在你的项目中使用它，例如 JQuery。

如果此选项不可用 - 更新您的打字稿。

【讨论】：