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



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

在版本 6 之后,他们在应用程序包中包含 THREE.js。

现在我可以像这样在我的插件中使用它:

declare var THREE:any; 

但是我丢失了所有类型,所以我通过以下方式安装了三个.js:

npm install --save three

我可以使用 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 应用程序中可用的命名空间?

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

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@typesthreeindex.d.ts" />

注意:在这种情况下,不要导入带有"import"或"require"的 THREE 命名空间。

如果您有以下问题:

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

(关于UMD(

您可以尝试在tsconfig.json中使用选项:

"compilerOptions": {
"allowUmdGlobalAccess": true,

(关于配置选项(

这将允许编译器访问 UMD 全局,因此在这种情况下无需导入或引用此类模块。

三个正是这种情况.js他们 alredy 将 THREE 命名空间作为模块添加到 UMD 全局范围。因此,如果您需要包含此模块,则应导入。如果您只想引用,则可以使用此选项。如果打字稿在配置中无法识别此选项,只需更新您的打字稿即可。

npm install typescript

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

最新更新