javascript - How to override a TypeScript UMD global type definition? - Stack Overflow

admin管理员组

文章数量:1254799

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, f.e.

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..

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 ment?

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, f.e.

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..

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 ment?

• javascript
• typescript
• three.js
• type-declaration

Share Improve this question Follow edited May 13, 2019 at 0:48 trusktr asked May 12, 2019 at 22:43 trusktrtrusktr 45.5k5858 gold badges209209 silver badges287287 bronze badges 5

• So, you're overriding the global THREE? What reason is there for doing this? – Andrew Eisenberg Commented May 13, 2019 at 0:05
• @AndrewEisenberg There is no global THREE; I want to import it into my global.ts module and make it a global. But then in my src/my-code.ts file I get the error 'THREE' refers to a UMD global, but the current file is a module. Consider adding an import instead.. How would I import THREE and make it global in the one module, and use it as a global in the other modules? – trusktr Commented May 13, 2019 at 0:28
• Mohamed Hegazy said "a module (i.e. a file with at least one top-level import ot export) has its own scope, and declarations inside this file are not visible outside it unless exported." over at github./Microsoft/TypeScript/issues/…. Is this the problem? That I'm importing THREE in a module and declaring a global, and this definition is not visible outside the file (unless I use reference for example)? How do I get the definition from 'three' and make it a global? – trusktr Commented May 13, 2019 at 0:58
• @AndrewEisenberg I think there's just something wrong with my setup: even if I put nothing but declare var foo: number in my global.d.ts file, then in any other .js file I try console.log(foo) and it plains that it can not find foo. I think I might just close this question. – trusktr Commented May 13, 2019 at 5:43
• @AndrewEisenberg Oh, I see the problem. I have both src/global.ts and src/global.d.ts, which TypeScript apparently merges into one (or something). As soon as I renamed them differently (f.e. make-global.ts and global.d.ts), then it all started working. I was pulling my hair out. – trusktr Commented May 13, 2019 at 6:04

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 10

For three.js you could declare piler option allowUmdGlobalAccess in tsconfig.json:

"pilerOptions": {
    "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

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

The two global files have the same name! (i.e. 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.

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)

本文标签： javascriptHow to override a TypeScript UMD global type definitionStack Overflow