如何声明对现有命名空间的引用，该命名空间可在运行时从 JavaScript 包中获得

Posted 2023-03-16

【中文标题】如何声明对现有命名空间的引用，该命名空间可在运行时从 JavaScript 包中获得

【英文标题】：How to declare reference to an existing namespace which is available from JavaScript bundle at runtime

【发布时间】：2020-02-04 06:15:31

【问题描述】：

我正在为现有的 javascript 应用程序编写一个插件 - Forge Autodesk.Viewing

在第 6 版之后，他们在应用包中包含了 THREE.js。

现在我可以像这样将它与我的插件一起使用：

declare var THREE:any; 

但是我丢失了所有类型，所以我通过以下方式安装了three.js：

npm install --save three

我可以使用三个并导入它，但我不需要导入它，因为我已经在我的主应用程序中拥有它。我需要做的是引用类型，所以我尝试做这样的事情：

    declare var THREE:THREE;
//Cannot use namespace 'THREE' as a type.

然后我尝试：

/// <reference types='three' /> 工作正常，但是：

        const planes:THREE.Plane[] = []; //this line is okey

        planes.push(new THREE.Plane()); //but this says
        
        //'THREE' refers to a UMD global, 
        // but the current file is a module. 
        // Consider adding an import instead.

Tsc 坚持我们应该导入它：

import * as THREE from 'three'; 

它编译时没有任何问题，但是当我启动应用程序时它崩溃了，因为它试图再获取一个 THREE.js 实例，我没有提供它，因为我在主应用程序中拥有它。

如何声明正确的引用并将类型保存到主要 JavaScript 应用程序可用的命名空间？

【参考方案1】：

Ypu 需要导入三个模块： 像这样：

import * as THREE from 'three'; // or import THREE from 'three';

或

var THREE = require('Three').

并使用 webpack 或其他模块加载器（！）

如果您想手动包含 THREEJS 分发文件并使用不带模块的 TS 绑定（类型定义）（不推荐） - 您可以将 Three.d.ts 文件包含到您的项目中（与其他 THREEJS d.ts 文件一起使用）并将其与三个斜线参考。例如：

/// <reference path="..\..\node_modules\@types\three\index.d.ts" />

注意：在这种情况下，不要使用“import”或“require”导入三个命名空间。

【讨论】：

正如我所说 - 它无效。我已经在主应用程序中有三个。我不需要将它包含在我的扩展中。仅需要类型。

【参考方案2】：

有一个用于 Forge Viewer 的 TypeScript 定义文件 (.d.ts)，您应该可以将其与 THREE.js 定义文件一起使用：https://forge.autodesk.com/blog/typescript-definitions-forge-viewer-and-nodejs-client-sdk-now-available。

【讨论】：

如果您阅读您引用的文章，您可能会注意到它需要安装@types/three。但这种类型已经过时，从今年 6 月开始被列入“三”。在我写作的时候，我有这些类型。我需要的是引用三个命名空间。

我知道这一点。但是，Forge Viewer 基于旧版本的 three.js（我相信它是 R71），它还不包括 TypeScript 定义。这就是为什么您必须使用 @types/three 之类的东西单独引入类型。

【参考方案3】：

如果您遇到以下问题：

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

(about UMD)

您可以尝试使用 tsconfig.json 中的选项：

"compilerOptions": 
    "allowUmdGlobalAccess": true,

(about config options)

这将使编译器能够访问 UMD 全局，因此在这种情况下您无需导入或引用此类模块。

这与 three.js 的情况完全相同。他们已经将 THREE 命名空间作为模块添加到 UMD 全局范围。所以如果你需要包含这个模块，你应该导入。如果您只想参考，您可以使用此选项。如果 typescript 在配置中无法识别此选项，只需更新您的 typescript。

npm install typescript

感谢亲爱的 SalientBrain 和亲爱的 Petr Broz 的关注和帮助。