使用 forge-viewer/node_modules/@types/three 中的 THREE 会导致编译器错误

Posted 2023-03-16

【中文标题】使用 forge-viewer/node_modules/@types/three 中的 THREE 会导致编译器错误

【英文标题】：Using THREE from forge-viewer/node_modules/@types/three causes compiler error

【发布时间】：2020-10-10 00:59:34

【问题描述】：

我需要使用需要THREE.Vector4 类型参数的Viewer.setThemingColor() 方法。

我正在使用 Angular 9，并且我已经安装了 @types/forge-viewer，其中还包括在 forge-viewer/node_modules/@types/three 处的三个定义。

Visual Studio Code 获取THREE.Vector4 的定义并插入import * as THREE from 'forge-viewer/node_modules/@types/three'，但ng build 命令抛出错误：

Can't resolve 'forge-viewer/node_modules/@types/three'.

我尝试在许多变体中为tsconfig.app.json（类型）和tsconfig.json（类型根）添加三个，但这没有帮助。

额外安装 @types/three 并从“三”导入将修复编译器错误，但它会在不同位置创建重复定义，并且 Visual Studio Code 只会自动查看来自 forge-viewer forge-viewer/node_modules/@types/three 而不是 three 的位置。

她有什么问题以及如何解决？

【问题讨论】：

在安装@types/three 时有一个额外的副作用：在浏览器中加载了两个不同的three.js 副本：一个由 Forge 脚本加载，另一个从 webpack 加载。当尝试使用三种类型时，这种情况会在代码中产生实际问题。

Bryan Huang你能看看这个吗？

您确定安装@types/three 也会安装实际的three.js 库吗？这似乎很奇怪。

在不太了解Angular 9及其构建系统的情况下，大致情况是这样的：Forge Viewer包含了three.js（版本R71），通过THREE全局变量自动获取库.所以这里的目标是以某种方式说服 Angular 假设在包含三个.js 库 R71 的全局范围内总会有一个 THREE 对象。

@PetrBroz 我认为该软件包已安装，因为编译后它已从 webpack 加载到浏览器中。在 Chrome 调试器中可以看到这三个.js 版本的源代码以及随 viewer.js 提供的另一个副本。

【参考方案1】：

我找到了一种方法来避免在代码中引用 THREE 对象而不安装 @types/three 时出现编译器错误。在引用形式 THREE 的 TS 文件中，例如 THREE.Vector4，而不是从模块中导入 THREE，而是插入“假”声明

declare var THREE: any;

积极的结果是：

没有编译错误； 没有从 webpack 加载的 three.js 的第二个副本

负面结果是在 VS Code 中丢失 TypeScript 智能感知，但可以通过临时安装 @types/three、开发和测试代码然后删除 @types/three 来缓解这种情况。