How to declare reference to an existing namespace which is available from javacript bundle at runtime

问题

I am writing a plugin for existing Javascript app - Forge Autodesk.Viewing

After version 6 they have included THREE.js inside of their app bundle.

Right now I'm able to use it with my plugin like this:

declare var THREE:any;

But I'm loose all types.

So, I am install three.js by

npm install --save three

I'm able to use THREE, and import it. But I don't need to Import it as I already have it in my main app. What I need to do is to reference types.

So, I tried to do something like this:

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

Then I tried to:

/// <reference types='three' /> which works fine, but:

        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 insist that we should import it:

import * as THREE from 'three';

It's compile without any issues, but when I launch app it crash, cause it's try to get one more instance of THREE.js, which I do not provide cause I have it inside main app.

So to sum up - how to declare correct reference and keep types to an namespace which is available at main javascript application?

回答1:

There's a TypeScript definition file (.d.ts) for Forge Viewer that you should be able to use together with a THREE.js definition file: https://forge.autodesk.com/blog/typescript-definitions-forge-viewer-and-nodejs-client-sdk-now-available.

回答2:

Ypu need to import THREE module: Like this:

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

var THREE = require('Three').

and use webpack or other module loader (!)

If you want to manually include THREEJS distribution file and use TS bindings (type definitions) without modules (not recommended) - you can include Three.d.ts file to your project (with other THREEJS d.ts files) and use it with three slashes ref. For example:

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

Note: don't import THREE namespace with "import" or "require" in this case.

回答3:

If you have issue such as:

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

(about UMD)

You may try to use option in tsconfig.json:

"compilerOptions": {
    "allowUmdGlobalAccess": true,

(about config options)

This will give compiler access to UMD global, so you do not need to import or reference such modules in that case.

And it's exact the case with three.js They alredy add THREE namespace as module to UMD global scope. So if you need to include this module you should import. If you want only reference you could use this option. If typescript doesn't recognize this option in config just update your typescript.

npm install typescript

Thank you dear SalientBrain and dear Petr Broz for your attention and help.

来源：https://stackoverflow.com/questions/58261279/how-to-declare-reference-to-an-existing-namespace-which-is-available-from-javacr

标签

javascript

typescript

three.js

autodesk-forge

autodesk-viewer