I am in the process of developing a plugin for an existing JavaScript application called Forge Autodesk.Viewing.
Recently, they have integrated THREE.js into their app bundle starting from version 6.
Currently, I am able to utilize it within my plugin by using the following code snippet:
declare var THREE:any;
However, I lose all types with this approach, so I decided to install three.js separately using npm:
npm install --save three
Now, I can use THREE and import it, but importing is unnecessary since it is already included in the main app. What I really need is to reference the types, which led me to try this:
declare var THREE:THREE;
//Cannot use namespace 'THREE' as a type.
After that, I attempted:
/// <reference types='three' /> const planes:THREE.Plane[] = []; //this line is fine
planes.push(new THREE.Plane()); //but this gives error
//'THREE' refers to a UMD global,
// but the current file is a module.
// Consider adding an import instead.
The TypeScript compiler insists on importing it like this:
import * as THREE from 'three';
Although it compiles successfully, when I run the app, it crashes because it attempts to load another instance of THREE.js, which is not necessary as it is already present in the main application.
Is there a way to correctly declare the reference and maintain types for a namespace that is available in the main JavaScript application?