如何覆盖TypeScript UMD全局类型定义？

Question

I have installed three@^0.103.0 , which has its own type definitions.

In src/global.d.ts of my project I have:

import * as _THREE from 'three'

declare global {
    const THREE: typeof _THREE
}

Then in src/global.ts I have

import * as THREE from 'three'
(window as any).THREE = { ...THREE }

Then in src/my-code.js I am trying to use the THREE as a global variable, fe

console.log(new THREE.Vector3(1,2,3)) // ERROR, 'THREE' refers to a UMD global, but the current file is a module. Consider adding an import instead.

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

When I jump to the definition of THREE , it takes me to node_modules/three/src/Three.d.ts , which is not my src/global.d.ts file.

So, it seems like TypeScript is ignoring my global.d.ts definitions?

My tsconfig.json contains

  "allowJs" true,
  "checkJs" true,
  "include": ["src/**/*"]

and I have global.d.ts is inside of src .

If I add

/// <reference path="./global.d.ts" />

to the top of src/my-code.js file (JavaScript), then it works, and I can jump to the definition of THREE which takes me to my global.d.ts file.

Why does it not work without the reference comment?

Answer 1

The above should work. There's only one small gotcha:

The two global files have the same name! (ie global.ts and global.d.ts )

In this case, TypeScript seems to merge them together (or something), and thus seems to treat global as the same module (as in import './global' being ambiguous).

So, by renaming one module to a different name, it all works.

For example, rename src/global.ts to src/make-global.ts , and leave src/global.d.ts , and it will work.

I was pulling my hair out wondering what was going on until I renamed one of the files.

Answer 2

You should check TypeScript typings resolution strategy in the handbook .

As state there, .ts files have precedence upon .d.ts .

(just bumped into the same problem myself)

Answer 3

For three.js you could skip this local globals chick to chick by using compiler option:

"compilerOptions": {
    "allowUmdGlobalAccess": true,

This will give typescript access to your project global UMD, where three.js is listed when you install it. Then you could use it at your project same way as for example JQuery.

If this option not available - update your typescript.

Some details